zoukankan      html  css  js  c++  java
  • 纯JS前端分页方法(JS分页)

    1、JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据。

    但是有时也需要前端本地进行一些简单的分页处理以减轻浏览器渲染时的内存损耗。如后台传回的数据条数非常多,达到几千条甚至上万条,但是后台又不方便分页传回数据,这个时候就只能前端先获取所有数据保存下来,然后前端本地进行分页并渲染显示。

    2、只需要一个纯原生的js函数就可以实现前端的分页功能,直接上js代码:

     1 /**
     2  * @name  getTableData
     3  * @desc  纯JS前端分页方法
     4  * @param  {Number} page 当前页码,默认1
     5  * @param  {Number} pageSize 每页最多显示条数,默认10
     6  * @param  {Array} totalData 总的数据集,默认为空数组
     7  * @return {Object} {
     8     data, //当前页展示数据,数组
     9     page, //当前页码
    10     pageSize, //每页最多显示条数
    11     length, //总的数据条数
    12   }
    13 **/
    14 const getTableData = (page = 1, pageSize = 10, totalData = []) => {
    15   const { length } = totalData;
    16   const tableData = {
    17     data: [],
    18     page,
    19     pageSize,
    20     length,
    21   };
    22   if (pageSize >= length) { //pageSize大于等于总数据长度,说明只有1页数据或没有数据
    23     tableData.data = totalData;
    24     tableData.page = 1;//直接取第一页
    25   } else { //pageSize小于总数据长度,数据多余1页
    26     const num = pageSize * (page - 1);//计算当前页(不含)之前的所有数据总条数
    27     if (num < length) { //如果当前页之前所有数据总条数小于(不能等于)总的数据集长度,则说明当前页码没有超出最大页码
    28       const startIndex = num;//当前页第一条数据在总数据集中的索引
    29       const endIndex = num + pageSize - 1;//当前页最后一条数据索引
    30       tableData.data = totalData.filter((_, index) => index >= startIndex && index <= endIndex);//当前页数据条数小于每页最大条数时,也按最大条数范围筛取数据
    31     } else { //当前页码超出最大页码,则计算实际最后一页的page,自动返回最后一页数据
    32       const size = parseInt(length / pageSize); //取商
    33       const rest = length % pageSize; //取余数
    34       if (rest > 0) { //余数大于0,说明实际最后一页数据不足pageSize,应该取size+1为最后一条的页码
    35         tableData.page = size + 1;//当前页码重置,取size+1
    36         tableData.data = totalData.filter((_, index) => index >= (pageSize * size) && index <= length);
    37       } else if (rest === 0) { //余数等于0,最后一页数据条数正好是pageSize
    38         tableData.page = size;//当前页码重置,取size
    39         tableData.data = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length);
    40       } //注:余数不可能小于0
    41     }
    42   }
    43   return tableData;
    44 };

    只需要传入对应参数就可以返回带有对应分页属性的对象,用于前端界面展示。

    如有问题欢迎留言讨论。

    原创博客禁止抄袭,转载请注明出处:原文地址:https://www.cnblogs.com/xiao-pengyou/

    知识在于分享,如有问题欢迎评论! 原创博客禁止抄袭,原文地址:https://www.cnblogs.com/xiao-pengyou/
  • 相关阅读:
    SQL中with(nolock)作用说明
    GridView应用随笔
    Repeater和Gridview前台显示行号的方法
    JQuery实现Ajax跨域访问--Jsonp原理
    Windows 2012 R2设置同一用户同时多点远程系统
    MySql项目中使用的小窍门
    Extjs关于combobox的二三事
    extjs 验证随手记录
    Extjs关于grid 行变色
    关于在ASP.NET MVC 中使用EF的Code First的方式来读取数据库时的Validation failed for one or more entities. See 'EntityValidationErrors' property for more details.
  • 原文地址:https://www.cnblogs.com/journey-blog/p/11105474.html
Copyright © 2011-2022 走看看