jQuery 数据表 Twitter/facebook 风格分页

Question

我一直在寻找关于如何做到这一点的好资源，但没有运气。我使用 jQuery 数据表插件进行服务器端处理并启用管道传输（示例） 。我在我的 asp.net webforms 项目中使用了此功能，并将在未来的项目中转向 MVC。我正在使用找到的类进行服务器端处理 这里。我也一直在浏览这里找到的文章 与分页相关。

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

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

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

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

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

Answer 1

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

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

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

   $(文档).ready(function (){
      var table = $('#example').DataTable({
         dom: 'frt',
         ajax: 'https://api.myjson.com/bins/qgcu',
         绘制回调：函数（）{
            // 如果还有更多数据
            if($('#btn-example-load-more').is(':visible')){
               // 滚动到“加载更多”按钮
               $('html, body').animate({
                  滚动顶部：$('#btn-example-load-more').offset().top
               }, 1000);
            }
   
            // 根据是否有更多可用数据显示或隐藏“加载更多”按钮
            $('#btn-example-load-more').toggle(this.api().page.hasMore());
         }      
      });
   
      // 处理点击“加载更多”按钮
      $('#btn-example-load-more').on('点击', function(){  
         // 加载更多数据
         table.page.loadMore();
      });
   });
   

请参阅此示例了解代码和示范。

有关更多信息，请参阅 jQuery DataTables：“加载更多”按钮示例和细节。