js前端计算分页

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

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

要在前端计算分页,你需要知道总数据量、每页显示的条目数和当前页码。以下是一个简单的JavaScript函数,用于计算分页信息:

function calculatePagination(totalItems, currentPage, itemsPerPage) {
  // 计算总页数
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  
  // 根据当前页计算起始项和结束项
  const startItem = (currentPage - 1) * itemsPerPage;
  const endItem = currentPage * itemsPerPage;
  
  return {
    totalItems: totalItems,
    currentPage: currentPage,
    itemsPerPage: itemsPerPage,
    totalPages: totalPages,
    startItem: startItem,
    endItem: Math.min(endItem, totalItems), // 防止endItem超过totalItems
  };
}
 
// 使用示例
const totalItems = 120; // 总共有120条数据
const currentPage = 5; // 当前是第5页
const itemsPerPage = 10; // 每页显示10条数据
 
const paginationInfo = calculatePagination(totalItems, currentPage, itemsPerPage);
console.log(paginationInfo);

这个函数接受总数据量、当前页码和每页条目数作为参数,计算并返回相应的分页信息。在实际应用中,你可以根据这些信息来显示分页控件,并请求对应页码的数据。

2,下面再给大家提供一种其他博主的方法,原创博客禁止抄袭,转载请注明出处:原文地址:https://www.cnblogs.com/xiao-pengyou/

/**
 * @name  getTableData
 * @desc  纯JS前端分页方法
 * @param  {Number} page 当前页码,默认1
 * @param  {Number} pageSize 每页最多显示条数,默认10
 * @param  {Array} totalData 总的数据集,默认为空数组
 * @return {Object} {
    data, //当前页展示数据,数组
    page, //当前页码
    pageSize, //每页最多显示条数
    length, //总的数据条数
  }
**/
const getTableData = (page = 1, pageSize = 10, totalData = []) => {
  const { length } = totalData;
  const tableData = {
    data: [],
    page,
    pageSize,
    length,
  };
  if (pageSize >= length) { //pageSize大于等于总数据长度,说明只有1页数据或没有数据
    tableData.data = totalData;
    tableData.page = 1;//直接取第一页
  } else { //pageSize小于总数据长度,数据多余1页
    const num = pageSize * (page - 1);//计算当前页(不含)之前的所有数据总条数
    if (num < length) { //如果当前页之前所有数据总条数小于(不能等于)总的数据集长度,则说明当前页码没有超出最大页码
      const startIndex = num;//当前页第一条数据在总数据集中的索引
      const endIndex = num + pageSize - 1;//当前页最后一条数据索引
      tableData.data = totalData.filter((_, index) => index >= startIndex && index <= endIndex);//当前页数据条数小于每页最大条数时,也按最大条数范围筛取数据
    } else { //当前页码超出最大页码,则计算实际最后一页的page,自动返回最后一页数据
      const size = parseInt(length / pageSize); //取商
      const rest = length % pageSize; //取余数
      if (rest > 0) { //余数大于0,说明实际最后一页数据不足pageSize,应该取size+1为最后一条的页码
        tableData.page = size + 1;//当前页码重置,取size+1
        tableData.data = totalData.filter((_, index) => index >= (pageSize * size) && index <= length);
      } else if (rest === 0) { //余数等于0,最后一页数据条数正好是pageSize
        tableData.page = size;//当前页码重置,取size
        tableData.data = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length);
      } //注:余数不可能小于0
    }
  }
  return tableData;
};