5

我一直在寻找关于如何在没有运气的情况下做到这一点的好资源。我正在使用带有服务器端处理的 jQuery 数据表插件以及启用流水线（示例）。我在我的 asp.net webforms 项目中有这个工作，并将转移到 MVC 以用于未来的项目。我正在使用Here找到的类处理服务器端处理。我也一直在浏览与分页相关的文章。

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

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

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

最终，我希望在上述两种分页样式之间进行选择。

有没有人有任何好的建议和/或示例/教程要分享？

4

1 回答 1

0

我开发了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：“加载更多”按钮。

于 2017-07-31T14:30:52.413 回答