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。