使用simplePagination.js显示JSON数据? [英] Display json data with simplePagination.js?

问题描述

分页演示

PAGINATION DEMO

我正在使用handlebars.js& simplePagination.js

I am developing a pagination with handlebars.js & simplePagination.js

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

1. Data is loaded from JSON and displayed using handlebars.js

现在我必须将 JSON数据映射到分页，该在哪里做?除此之外，官方网站" http://flaviusmatis.github.io/simplePagination .js "

Now I have to Map JSON DATA TO PAGINATION, where do I do it? Apart from this there is not Much Documentation in the official website "http://flaviusmatis.github.io/simplePagination.js"

请求您的帮助.任何意见/建议，不胜感激.

Request your kind help. Any advice / suggestions are greatly appreciated.

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


        }
    });

});

推荐答案

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

Before setting up pagination, just hide other items 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>

您需要隐藏初始数据

这篇关于使用simplePagination.js显示JSON数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！