如何在Javascript中对结果数组进行分页

Question

这个函数可以对一个数组进行分页：

function paginate(res,page,page_size,max_page_size) {
        page=page||1;
        page_size=page_size||10;
        max_page_size=max_page_size||100;
        page_size=page_size>max_page_size?max_page_size:page_size;
        var pages=Math.round( res.length / page_size),
            items=[];
        for( var p=1; p <= pages; p++) {
            var start= Math.round( page_size * (p-1) );
            items.push( res.slice(start,start+page_size) );
        }
        return page < items.length?items[page-1]:items[ items.length-1 ];
    }

拥有

• res = 数组
• page = 当前页面
• page_size = 页面中要返回的项目数
• max_page_size = 页面的最大项目数

function paginate(res, page, page_size, max_page_size) {
  page = page || 1;
  page_size = page_size || 10;
  max_page_size = max_page_size || 100;
  page_size = page_size > max_page_size ? max_page_size : page_size;
  var pages = Math.round(res.length / page_size),
    items = [];
  for (var p = 1; p <= pages; p++) {
    var start = Math.round(page_size * (p - 1));
    items.push(res.slice(start, start + page_size));
  }
  return page < items.length ? items[page - 1] : items[items.length - 1];
}

var list = Array.apply(null, Array(10)).map(function() {
  return Array.apply(null, Array(Math.floor(Math.random() * 10 + 3))).map(function() {
    return String.fromCharCode(Math.floor(Math.random() * (123 - 97) + 97));
  }).join('')
});

console.log(list)
for (var i = 1; i < 8; i++) {
  console.log("page", i, paginate(list, i, 2, 2))
}

这个函数有一个错误，因为一旦它到达最后一个分页结果，它总是返回相同的页面。为什么？有其他解决方案吗？

[更新]

问题在于索引计算，这是正确的版本：

 function paginate(res,page,page_size,max_page_size) {
    page=page||1;
    page_size=page_size||10;
    max_page_size=max_page_size||100;
    page_size=page_size>max_page_size?max_page_size:page_size;
    var pages=Math.ceil( res.length / page_size),
        items=[];
    for( var p=1; p <= pages; p++) {
        var start= page_size * (p-1)
        items.push( res.slice(start,start+page_size) );
    }
    return page <= items.length?items[page-1]:[];
}

有 2 个错误：Math.round 而不是 Math.ceil 和最后一个三元运算符 page <= items.length?items[page-1]:[];

Answer 1

尚未确定您的代码的确切问题，但我记得当我在使用舍入函数时到达数组末尾时，我在保持状态和重置索引方面遇到了很多困难。

最后，我只是做了一个“分块器”来将数组分成块，并将其连接到使用 previous() 和 next() 方法呈现数组内容的东西上，以获取数组的正确艺术。它在视图中实际代表哪个页面，取决于要缓存的视图。

var Chunker = function Chunker( config ) {
        if ( !Array.isArray( config.data ) ) {
            throw new Error('chunker source is not an array');
            return false;
        }
        this.data = config.data;
        this.index = 0;
        this.length = config.len || config.data.length; // Amount of items per chunk. When not defined, will return the entire array.
    };
Chunker.prototype = {
    'constructor' : Chunker,
    'index' : function index( number ) { // => current index (getter) || => this (setter)
        if ( number !== undefined ) {
            this.index = index;
            return this;
        }
        else return this.index;
    },
    'current' : function current() { // => { "index", "data" }
        return {
            "index" : this.index,
            "data" : this.data.slice( this.index, this.index + this.length )
        };
    },
    'next' : function next() { // => next chunk
        this.index += this.length;
        if ( this.index > this.data.length ) this.index = this.data.length - (this.data.length % this.length);
        return this.current();
    },
    'previous' : function previous() { // => previous chunk
        this.index -= this.length;
        if (this.index < 0 ) this.index = 0;
        return this.current();
    },
    'reset' : function reset() { // => this
        this.index(0);
        return this;
    }
};