用simplePagination.js显示json数据？

打击演示

我正在开发handlebars.js和simplePagination.js的分页

1. 数据从JSON加载并使用handlebars.js显示

2. 现在我必须将JSON数据映射到PAGINATION ，我在哪里做？ 除此之外，官方网站“ http://flaviusmatis.github.io/simplePagination.js ”中没有太多文档。

请求您的帮助。 任何建议/建议都非常感谢。

JS代码：

$(function () { function loadPosts(posts) { $('#posts').empty(); posts.each(function () { var source = $("#post-template").html(); var template = Handlebars.compile(source); var context = { author: this.data.author, domain: this.data.domain, id: this.data.id, ups: this.data.ups, downs: this.data.downs, num_comments: this.data.num_comments, subreddit: this.data.subreddit, title: this.data.title, url: this.data.url, permalink: this.data.permalink, }; var html = template(context); $('#posts').append(html); }); } $.ajax({ dataType: 'json', url: "https://www.reddit.com/.json", success: function (response_json) { // data = $(response_json.records.page); data = $(response_json.data.children); dataCount = data.length; //console.log(data); /* if (dataCount > opts.pageMax) { paginate(pageCount); posts = data.slice(0, opts.pageMax); console.log(posts) } else { posts = data; }*/ //loadPosts(posts); loadPosts(data); $('.pagination').pagination({ items: dataCount, // json length count itemsOnPage: 4 }); $('.pagination').pagination('selectPage', 1); //$('.pagination').pagination('prevPage', dataCount); //$('.pagination').pagination('nextPage', dataCount); //$('.pagination').pagination('getPagesCount', dataCount); //$('.pagination').pagination('getCurrentPage', dataCount); $('.pagination').pagination('updateItems', dataCount); } }); }); 

Answer 1

在设置pagination之前，只需隐藏其他项目items.slice(4).hide();

  $("#light-pagination").pagination({ items: 25, itemsOnPage: 4, cssStyle: "light-theme", // This is the actual page changing functionality. onPageClick: function(pageNumber) { // We need to show and hide `tr`s appropriately. var showFrom = 4 * (pageNumber - 1); var showTo = showFrom + 4; items.hide() .slice(showFrom, showTo).show(); } }); 

下面的工作示例

 $(function() { function loadPosts(posts) { $('#posts').empty(); posts.each(function() { var source = $("#post-template").html(); var template = Handlebars.compile(source); var context = { author: this.data.author, domain: this.data.domain, id: this.data.id, ups: this.data.ups, downs: this.data.downs, num_comments: this.data.num_comments, subreddit: this.data.subreddit, title: this.data.title, url: this.data.url, permalink: this.data.permalink, }; var html = template(context); $('#posts').append(html); }); } $.ajax({ dataType: 'json', url: "https://www.reddit.com/.json", success: function(response_json) { // data = $(response_json.records.page); data = $(response_json.data.children); dataCount = data.length; loadPosts(data); var items = $(".score-right"); items.slice(4).hide(); $("#light-pagination").pagination({ items: 25, itemsOnPage: 4, cssStyle: "light-theme", // This is the actual page changing functionality. onPageClick: function(pageNumber) { // We need to show and hide `tr`s appropriately. var showFrom = 4 * (pageNumber - 1); var showTo = showFrom + 4; // We'll first hide everything... items.hide() // ... and then only show the appropriate rows. .slice(showFrom, showTo).show(); } }); } }); });