Javascript 是否使用simplePagination.js显示json数据？

我正在使用handlebar.js和simplePagination.js开发分页

数据从JSON加载，并使用handlebar.js显示

现在我必须将JSON数据映射到分页，我在哪里做？除此之外，官方网站上没有太多文档“”

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

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);


        }
    });

});

---

在设置

分页之前，只需隐藏其他项
项。slice（4.hide（）

下面是一个工作示例


$（函数（）{
功能加载桩（桩）{
$（'#posts'）.empty（）；
posts.each（函数（）{
var source=$（“#发布模板”）.html（）；
var template=handlebar.compile（源代码）；
变量上下文={
作者：this.data.author，
域：this.data.domain，
id:this.data.id，
ups:this.data.ups，
唐斯：this.data.downs，
num_comments:this.data.num_comments，
subreddit:this.data.subreddit，
标题：this.data.title，
url:this.data.url，
permalink:this.data.permalink，
};
var html=模板（上下文）；
$（'#posts'）.append（html）；
});
}
$.ajax({
数据类型：“json”，
url:“https://www.reddit.com/.json",
成功：函数（response_json）{
//数据=$（response_json.records.page）；
data=$（response_json.data.children）；
dataCount=data.length；
装载柱（数据）；
变量项=$（“.score right”）；
items.slice（4.hide（）；
$（“#轻型分页”）。分页({
项目：25，
第1页第4页，
cssStyle：“灯光主题”，
//这是实际的页面更改功能。
onPageClick:功能（页码）{
//我们需要适当地显示和隐藏'tr'。
var showFrom=4*（页码-1）；
var showTo=showtfrom+4；
//我们先把一切都藏起来。。。
items.hide（）
//…然后仅显示相应的行。
.slice（showFrom，showTo）.show（）；
}
});
}
});
});

{{record_count}}
{{desc}
我认为分页发生在这里
if（dataCount>opts.pageMax）{paginate（pageCount）；posts=data.slice（0，opts.pageMax）；console.log（posts）}else{posts=data；}
！！非常感谢瑜珈师！！
 $("#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();
        }
      });