工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办

简介: 工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办

有这么个场景,后端接口的列表数据没有做分页给我,相当于是直接返回所有的列表数据,比如有100条就返回100,但是前端显示,则需要做成分页,比如10条为一页。

一、如何使用elementUI+vue实现前端分页

假如你用vue来实现,思路就是将数据切割,然后分批显示。

所以可以使用 computed 计算属性和 v-for 指令来实现前端分页。

因为后端返回给你的数据,你一般会整个存放在一个数组中,要显示第一页,其实就是在该数组中分割提取下标为0-9的数据项,如果是第三页,则在该数组中提取第20-29的数据项,创建一个计算属性,在该计算属性中完成数据的提取,再给到视图即可。

如果我需要结合elementUI的分页组件,怎么实现呢?以下是实现方式,做得跟后端给的分页一样的效果。

<!--这里的paginatedData就是根据list进行切割的计算属性-->
<el-table :data="paginatedData" border style="width: 100%">
  <el-table-column type="index" label="序号" :index="indexMethod" width="60" header-align="center" align="center"> </el-table-column>
        <el-table-column prop="customerName" label="客户名称" min-width="130"> </el-table-column>
        <el-table-column prop="chainName" label="业务名称" min-width="120"> </el-table-column>
        <el-table-column prop="statisticsPeriod" label="统计周期" min-width="80"> </el-table-column>
        <el-table-column prop="dateCycle" label="时间周期" min-width="150"> </el-table-column>
</el-table>     
<!--这里的pagination分页组件不需要做任何改动-->
<div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10, 30, 50]" :page-size="listQuery.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalNum"> </el-pagination>
</div>
<script>
export default {
  data() {
    return {
      list: [] //后端接口给的列表数据(未分页,全部返回)
    }
  },
  created() {
    //请求后端数据
    this.getList();
  },
  computed: {
    // 使用前端实现分页的计算数据
    paginatedData() {
      // 分页的起始下标
      const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;
      // 分页的末尾下标
      const endIndex = startIndex + this.listQuery.pageNum;
      // 返回切割后的数据
      return this.list.slice(startIndex, endIndex);
    },
    // 总条数
    totalNum() {
      return this.list.length;
    },
    // 总分页数
    total() {
      return Math.ceil(this.list.length / this.listQuery.pageNum);
    }
  },
  methods:{
   //数据
   getList() {
      //调用后端接口
      staticsList().then((res) => {
        this.list = res.data;
      });
    },
    // 每页列表数
    handleSizeChange(val) {
      this.listQuery.pageNum = val;
    },
    // 当前分页数(第几页)
    handleCurrentChange(val) {
      this.listQuery.page = val;
    },
  }
}    
</script>

这样就可以实现前端分页了。

二、通用的前端分页代码

如果你的项目中,不是用elementUI框架,其实也很好办,主要是记住以上前端分页的思路:找到某一页的开始下标和结束下标,然后去分割数组,返回给视图。

以下是一个示例代码:

<template>
  <div>
    <ul v-for="item in paginatedData" :key="item.id">
      <!-- 显示需要显示的数据 -->
        <li>{{item.name}}</li>
    </ul>
    <div>
      <!-- 显示分页控件 -->
      <button v-for="pageNumber in totalPages" :key="pageNumber" @click="currentPage = pageNumber">
        {{ pageNumber }}
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [], // 假如这里就是你通过接口获取到的所有的数据(未分页)
      itemsPerPage: 10, // 每页显示的数据量
      currentPage: 1 // 当前页码
    };
  },
  computed: {
    paginatedData() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.data.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.data.length / this.itemsPerPage);
    }
  }
};
</script>

在这个示例中,我们使用 v-for 指令来遍历每一页要显示的数据,并使用 slice() 方法来获取当前页码对应的数据。我们还计算了总页数,以便在分页控件中显示所有的页码。

在模板中,我们使用 v-for 指令来遍历每一页要显示的数据,并在分页控件中使用 v-for 指令来显示所有的页码。我们在每个页码按钮上绑定了一个 click 事件,点击按钮时会更新当前页码。

如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师!

相关文章
|
15天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
16天前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
31 0
|
1月前
|
JSON 前端开发 Java
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
28 0
|
7天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
12天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
12天前
|
Web App开发 移动开发 运维
跨域解决方案[前端+后端]
跨域解决方案[前端+后端]
23 0
|
13天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
14天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
27天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈应用的技术挑战与解决方案
在当今互联网时代,全栈开发成为越来越受欢迎的技术趋势。本文将深入探讨从前端到后端的全栈开发过程中所面临的技术挑战,并提出相应的解决方案,涵盖前端框架选择、后端技术架构、数据库设计以及跨平台兼容性等关键问题。
|
1月前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发的技术生态
本文将探讨如何在全栈开发中构建完整的技术生态,从前端到后端各个层面进行深入剖析,讨论不同技术之间的协作与整合,为开发人员提供全面的指导与启示。