首页 > 解决方案 > Javascript:分页

问题描述

我必须从和到记录的索引。

想法将不胜感激。例如,如果:

data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]
records_per_page = 4

页码为 1,2,3,4,5(最后一页有一条记录)。

我需要根据页码获取索引。

例如,我单击第 1 页,它应该给我 0 和 3,以便我将它从索引发送到服务器,然后它返回值 [1,2,3,4]

如果我单击第 2 页,它应该给我 4 和 7,以便服务器返回值 [5,6,7,8]

function(total, page_no){ 
 // Need to return the indices of the records
 return [from,to]
}

标签: javascriptarrayspagination

解决方案


您可以将数组分成每 x 个元素的第一个和最后一个索引:

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
const size = 4

const getIndices = (d, p) => p && p <= Math.ceil(d.length / size) && d.reduce((a, o, i) => {
  const c = Math.floor(i / size);
  a[c] = [].concat((a[c] && a[c][0] || []), o);
  if(a[c].length === 1) a[c] = [a[c][0], a[c][0]]
  return a
}, [])[p - 1].map(i => --i)

for(var i = 1; i < Math.ceil(data.length / size) + 1; i++) {
  console.log(getIndices(data, i))
}

编辑:我刚刚意识到这是一个简单的数学问题。请改用此代码:

var length = 17
const size = 4

const getIndices = (p, s, l) => p && p <= Math.ceil(l / s) && [s * (p - 1), s * p > l - 1 ? l - 1 : s * p - 1]

for(var i = 1; i < Math.ceil(length / size) + 1; i++) {
  console.log(getIndices(i, size, length))
}

第二次编辑:

var length = 17
const size = 4

const getIndices = (p, s, l) => +p && +p <= Math.ceil(l / s) && s * --p

for(var i = 1; i < Math.ceil(length / size) + 1; i++) {
  console.log(getIndices(i, size, length))
}

注意,这个函数可能会短很多,但我添加了 2 个错误检查: p检查 p 是否确实存在。&&链接所有条件以确保满足所有条件。p <= Math.ceil(d.length / size)检查是否p大于最大页数。下一部分是实际逻辑,返回页面开始(和结束)索引。


推荐阅读