jquery - jQuery数据表Twitter/facebook样式分页

我一直在寻找有关如何做到这一点的好资源。我正在将jQuery数据表插件与服务器端处理一起使用，并启用了流水线化（example）。我在asp.net Webforms项目中进行了这项工作，并将在以后的项目中移至MVC。我正在使用Here找到的类来处理服务器端处理。我也一直在浏览与分页有关的Here文章。

基本上，我需要做的是使用datatables插件和服务器端处理创建这种分页（管道在这里不一定很重要）

注意：
通过twitter /样式分页，我指的是：


表格底部的单个按钮可带回附加到表格中现有内容的其他结果
当用户通过滚动到达当前结果的末尾时，其他结果将无限加载（注意：我发现此功能内置在datatables插件中，因此我需要重点关注前面的方法）。


最终，我希望在以上两种分页样式之间进行选择。

难道有人有什么好的建议和/或示例/教程可以分享吗？

最佳答案

我开发了PageLoadMore插件，该插件可以用“加载更多”按钮替换默认的分页控件。


加载jQuery和jQuery DataTables文件后，包括插件的JavaScript文件。
在表格后添加ID为btn-example-load-more的“加载更多”按钮。
使用下面的代码初始化表：

$(document).ready(function (){
   var table = $('#example').DataTable({
      dom: 'frt',
      ajax: 'https://api.myjson.com/bins/qgcu',
      drawCallback: function(){
         // If there is some more data
         if($('#btn-example-load-more').is(':visible')){
            // Scroll to the "Load more" button
            $('html, body').animate({
               scrollTop: $('#btn-example-load-more').offset().top
            }, 1000);
         }

         // Show or hide "Load more" button based on whether there is more data available
         $('#btn-example-load-more').toggle(this.api().page.hasMore());
      }
   });

   // Handle click on "Load more" button
   $('#btn-example-load-more').on('click', function(){
      // Load more data
      table.page.loadMore();
   });
});

有关代码和演示，请参见this example。

有关更多示例和详细信息，请参见jQuery DataTables: "Load more" button。