jQuery数据表Twitter/facebook样式分页 [英] jQuery datatables Twitter/facebook style paging

问题描述

我一直在寻找有关如何做到这一点的好资源.我正在将jQuery数据表插件与服务器端处理一起使用，并启用了流水线处理(示例) .我在asp.net Webforms项目中进行了这项工作，并将在以后的项目中移至MVC.我正在使用发现此处.我也一直在浏览此处与分页有关.

I have been searching around for a good resource on how to do this with no luck. I am using the jQuery datatables plugin with serverside processing along with pipelining enabled(example). I have this working in my asp.net webforms project and will be moving to MVC for future projects. I am taking care of server side processing with the class found Here. I have also been looking through the article found Here related to the pagination.

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

Basically what I need to do is create this type of pagination with the datatables plugin and server side processing(pipelining is not necessarily important here)

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

NOTE: By twitter/style paging I am referring either to:

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

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

Ultimately I would like to have the choice between both styles of pagination above.

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

Doest anyone have any good advice and/or samples/tutorials to share?

推荐答案

我已经开发了 PageLoadMore 插件，可使用加载更多"按钮替换默认的分页控件.

I have developed PageLoadMore plug-in that allows to replace default pagination control with "Load more" button.

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

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

1. Include plug-in's JavaScript file after loading jQuery and jQuery DataTables files.
2. Add "Load more" button with ID btn-example-load-more after the table.

3. Use the code below to initialize the table:

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

有关代码和演示，请参见此示例.

See this example for code and demonstration.

请参见 jQuery DataTables:加载更多"按钮有关更多示例和详细信息.

See jQuery DataTables: "Load more" button for more examples and details.

这篇关于jQuery数据表Twitter/facebook样式分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！