jQuery数据表Twitter/facebook样式分页

Question

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

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

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

• 表格底部的单个按钮可将附加结果附加到表格中的现有内容中
• 当用户通过滚动到达当前结果时,无限加载其他结果(注意:我发现此功能内置于datatables插件中,因此我需要关注前面的方法).

最后,我想在上面的两种分页风格之间做出选择.

Doest有没有任何好的建议和/或样品/教程分享？

Answer 1

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

1. 加载 jQuery 和 jQuery DataTables 文件后包含插件的 JavaScript 文件。
2. btn-example-load-more在表格后面添加带有 ID 的“加载更多”按钮。

3. 使用下面的代码来初始化表：

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

请参阅此示例以获取代码和演示。

请参阅jQuery DataTables：“加载更多”按钮以获取更多示例和详细信息。