用simplePagination.js显示json数据?

时间:2017-07-20 08:22:25

标签: javascript jquery json handlebars.js

PAGINATION DEMO

我正在开发一个用handlebars.js& amp; simplePagination.js

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

  2. 显示
  3. 现在我必须将 JSON数据映射到PAGINATION ,我该怎么办?除此之外,官方网站“http://flaviusmatis.github.io/simplePagination.js

  4. 中没有太多文档

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

    JS CODE:

    $(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);
    
    
            }
        });
    
    });
    

1 个答案:

答案 0 :(得分:1)

在设置private void bunifuFlatButton2_Click(object sender, EventArgs e) { SqlConnection con = new SqlConnection(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=**F:\Blackhat\Blackhat\Blackhat.mdf**;Integrated Security=True"); try { con.Open(); SqlCommand cmd = new SqlCommand("Insert Into Clients(name) VALUES ('"+clientname.Text+"')", con); cmd.ExecuteNonQuery(); MessageBox.Show("Success "+clientname.Text); con.Close(); } catch (SqlException ex) { MessageBox.Show("Failed"+ex); } } 之前,只需隐藏其他项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();
        }
      });


    }
  });


});

您需要隐藏初始数据