jQuery 数据表 Twitter/facebook 风格分页

Question

我一直在寻找关于如何做到这一点的好资源，但没有运气。我正在使用带有服务器端处理功能的 jQuery 数据表插件以及启用的管道( example )。我在我的 asp.net webforms 项目中使用了此功能，并将在未来的项目中转向 MVC。我正在处理服务器端处理，发现类 Here 。我也一直在翻阅文章发现Here与分页相关。

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

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

• 表格底部的一个按钮，可返回附加到表格中现有内容的其他结果
• 当用户通过滚动到达当前结果的末尾时，会无限加载其他结果(注意:我发现此功能内置于数据表插件中，因此我需要重点关注之前的方法)。

最终我想在上面两种分页样式之间进行选择。

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

Answer 1

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

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

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

参见this example用于代码和演示。

参见jQuery DataTables: "Load more" button了解更多示例和详细信息。