使用简单的分页显示 json 数据.js?

Question

>分页演示

我正在开发一种带有车把的分页.js和简单的分页.js

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

2. 现在我必须将JSON 数据映射到分页，我在哪里做？除此之外，官方网站"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();
}
});
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>
<link href="https://flaviusmatis.github.io/simplePagination.js/simplePagination.css" rel="stylesheet">
<div id="light-pagination" class="pagination light-theme simple-pagination"></div>
<div id="posts"></div>
<script id="post-template" type="text/x-handlebars-template">
<div class="score-structural score-column2-wideright search-listings post">
<div class="score-right">
<h4>{{record_count}}</h4>
<h5 style="z-index: 1;">
<a href="#"> {{ title }} </a>
</h5>
<p style="z-index: 1;"> {{ desc }} </p>
</div>
</div>
</script>

您需要隐藏初始数据