理解使用 JavaScript 在分页中加载数据的概念时出现问题

issue in understanding concept of loading data in pagination with javascript

本文关键字：问题 数据 加载 JavaScript 分页      更新时间：2023-09-26

>我有很多数据，我想进行分页，这样我就可以每页加载 5 个项目，我想有 10 页。我试图从 http://addyosmani.com/blog/backbone-paginator-new-pagination-components-for-backbone-js/中获得灵感

<ul class="pagination" id="paginationSelect">

            <% for(var i = 0; i < 10 ; i++){ %>
                <% if(i === 0){ %>
                    <li><a id="a-page-item"  class="page">Previous</a></li>
                <% } else if(i > 0 && i < 10 - 1){ %>
                    <li><a id="a-page-item"  class="page"> <%= i %> </a></li>
                <% } %>
            <% } %>
        <li class="arrow"><a href="">Next</a></li>
      </ul>

（http://jsfiddle.net/LQg7W/2151/这个jsfiddle当然没有css）我的问题是，当我单击每个页面（从1到10）时，它会加载从1到5的数据（并且它们都相同），但是我如何在第一页上有5个数据，在第二页上有接下来的5个数据，依此类推。

event : {
"click #paginationSelect" : "fetchSelectedData"
}
onPageClick : function() {
            console.log("you clickedddd");
            this.collection.setPagination(1, 5);
            this.collection.setNrPages(5);
            this.collection.reset();
            this.$("#listMessages").empty(); //listMessage is a placeholder for showing data
            this.collection.fetch();
        },

Backbone.Paginator 提供了两种主要分页方法的实现 - 服务器端分页（Backbone.Paginator.requestPager）和客户端分页（Backbone.Paginator.clientPager）。

目前尚不清楚您使用哪一个，所以您能否为您的收藏提供源代码？

至于HTML模板，我建议您将其更改为以下内容：

<ul class="pagination" id="paginationSelect">
        <li><a id="previous-page" class="page">Previous</a></li>
        <% for(var i = 0; i < 10 ; i++) { %>
                <li><a id="page" class="page"><%= i %></a></li>
        <% } %>
        <li><a id="next-page" class="page">Next</a></li>
  </ul>

并将事件处理程序更新为 （如果您使用 requestPager）：

event : {"click #previous-page" : "previousPage",
         "click #next-page" : "nextPage",
         "click #page" : "page"},
previousPage : function(e) {
  this.collection.requestPreviousPage();
},
nextPage : function(e) {
  this.collection.requestNextPage();
},
page : function() {
  var page = $(e.target).text();
  this.collection.goTo(page);
},

Backbone.Paginator 将在您从集合中调用 requestPreviousPage（）、requestNextPage（）、goTo（pageNumber） 等方法后自动获取所需数据。

顺便说一句，在插件的github示例文件夹：Backbone.Paginator上，有相当好的例子同时使用Backbone.Paginator.requestPager和Backbone.Paginator.clientPager，所以你可以看看它们。

请注意：要使示例正常工作，您需要将 PaginatedCollection 中的 URL 更改为https://api.github.com/repos/backbone-paginator/backbone.paginator/issues?.js因为示例中使用的 URL 不会返回任何数据。在客户端分页示例中，您还需要注释掉同一文件中server_api部分，因此它的工作方式更像客户端分页。

相关文章：