Question

我一直在寻找一个很好的资源，如何做到这一点，没有运气。我正在使用jQuery datatables插件与服务器端处理以及启用流水线（example）。我在我的asp.net webforms项目中工作，并将转向MVC以用于未来的项目。我正在使用找到的类Here来处理服务器端处理。我也一直在查看与分页相关的文章Here。

基本上我需要做的是使用datatables插件和服务器端处理创建这种类型的分页（流水线在这里不一定重要）

注意： 通过twitter / style分页我指的是：

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

最终，我想在两种分页风格之间做出选择。

任何人都有任何好的建议和/或样本/教程可以分享吗？

Answer 1

我开发了PageLoadMore插件，允许用＆＃34;加载更多＆＃34;替换默认的分页控件。按钮。

在加载jQuery和jQuery DataTables文件后包含插件的JavaScript文件。
添加＆＃34;加载更多＆＃34;表格后面带有身份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。

jQuery数据表Twitter / facebook样式分页

1 个答案: