使用把手js的分页function

DEMO

我正在使用把手js开发分页function并从JSON获取数据。

1. 前5个结果将显示在页面加载上。

2. 点击下一个分页将显示另一组5个结果，依此类推。

3. 如果我通过在页面中显示每个5个结果来获得结果总数100。 页码将是20的1。

4. 如果分页有超过5页的页数，我想显示“1,2,3 …最后页数（20）”相同，反之亦然
5. on load上一个按钮当单击下一页时必须启用它。

请咨询您，并就此提出一些建议/建议。

应该像下面

感谢您的帮助！

谢谢

• 一些代码示例：

  $(function () { var opts = { pageMax: 5, postsDiv: $('#posts'), dataUrl: "searchResult.json" } function range(i) { return i ? range(i - 1).concat(i) : [] } function loadPosts(posts) { opts.postsDiv.empty(); posts.each(function () { var source = $("#post-template").html(); var template = Handlebars.compile(source); var context = { title: this.title, desc: this.body, }; var html = template(context); opts.postsDiv.append(html); }); } function paginate(pageCount) { var source = $("#pagination-template").html(); var template = Handlebars.compile(source); var context = { pages: range(pageCount) }; var html = template(context); opts.postsDiv.after(html); function changePage(pageNumber) { pageItems.removeClass('active'); pageItems.filter('[data-page="' + pageNumber + '"]').addClass('active'); loadPosts(data.slice(pageNumber * opts.pageMax - opts.pageMax, pageNumber * opts.pageMax)); } var pageItems = $('.pagination>li.pagination-page'); pageItems.on('click', function () { changePage(this.getAttribute('data-page')); }).filter('[data-page="1"]').addClass('active'); $('.pagination>li.pagination-prev').on('click', function () { gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) - 1; if (gotoPageNumber li.pagination-next').on('click', function () { gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) + 1; if (gotoPageNumber > pageCount) { gotoPageNumber = 1; } changePage(gotoPageNumber); }); } $.ajax({ dataType: 'json', url: opts.dataUrl, success: function (response_json) { data = $(response_json.records.page); dataCount = data.length; pageCount = Math.ceil(dataCount / opts.pageMax); if (dataCount > opts.pageMax) { paginate(pageCount); posts = data.slice(0, opts.pageMax); } else { posts = data; } loadPosts(posts); } }); }); 

Answer 1

几个月前我不得不解决类似的问题。 我从kottenator那里找到了这个要点 。

因此，您的范围function会被修改，其中c是当前页面，而您的pageCount 。 对函数的调用已被修改了一点，并且还添加了对paginate(...)函数的递归调用以在导航后重新计算标记（同样，在DOM附加函数调用中添加了分支，以修改分页标记） ，我使用了三元运算符。实现这一目标可能更优雅。
请参阅此CodePen

 function range(c,m) { var current = c || 1, last = m, delta = 2, left = current - delta, right = parseInt(current) + delta + 1, range = [], rangeWithEllipsis = [], l, t; range.push(1); for (var i = c - delta ; i <= c + delta ; i++) { if (i >= left && i < right && i < m && i > 1) { range.push(i); } } range.push(m); for (var i of range) { if (l) { if (i - l === 2) { t = l+1; rangeWithEllipsis.push(t); } else if (i - l !== 1) { rangeWithEllipsis.push("..."); } } rangeWithEllipsis.push(i); l = i; } return rangeWithEllipsis; } 

它并没有完全解决你的问题，但它确实分页。
如果我有时间，我会尝试按照你想要的方式对它进行分页（它实际上只是关于自定义算法中的delta ， right操作数，然后改变你的分页和分页prev事件处理程序调用）。

编辑我更改了算法以找到right边界。 您的index.html也进行了一些修改。
我们的想法是以5的倍数计算左右边界。然后，如果差异太大，则创建一系列索引以显示并添加省略号。 这应该有效地解决你原来的问题。

JavaScript的

 getFirstDigits = (t) => { return parseInt(t.toString().slice(0,-1)) } getLastDigit = (t) => { return parseInt(t.toString().slice(-1)) } isMultipleOf5 = (t) => { return [0,5].reduce((res,curr)=>{ return res = res || curr === getLastDigit(t); },false); } isBetween0and5 = (t) => { const _t = getLastDigit(t); return _t < 5; } isBetween5and9 = (t) => { const _t = getLastDigit(t); return _t => 5 && _t <= 9; } appendDigit = (t,d) => { return parseInt(getFirstDigits(t).toString() + d.toString()) } getSecondRightMostDigit = (t) => { return parseInt(t.toString().slice(-2,-1)) } incrementSecondDigit = (t) => { return t+10; } getLeft = (t) => { if(t>=10){ if(isBetween0and5(t)) return appendDigit(t,0); else return appendDigit(t,5); } else { if (t<5) return 0; else return 5; } } getRight = (t) => { if(t<5) return 5; else if (t<10) return 10; else if(isBetween0and5(t)) return appendDigit(t,5) else return appendDigit(incrementSecondDigit(t),0); } function range(c,m) { var current = c || 1, last = m, delta = 2, left = getLeft(c), right = getRight(c), range = [], rangeWithEllipsis = [], l, t; var rightBoundary = right < 5 ? 5 : right; for (var i = left ; i < rightBoundary ; ++i) { if( i < m && i > 0) range.push(i); } range.push(m); for (var i of range) { if (l) { if (i - l === 2) { t = l+1; rangeWithEllipsis.push(t); } else if (i - l !== 1){ rangeWithEllipsis.push("..."); } } rangeWithEllipsis.push(i); l = i; } return rangeWithEllipsis; } 

HTML /车把