jQuery datatables Twitter/facebook style paging

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.

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)

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

• A single button at the bottom of the table that brings back additional results appended to the existing content in the table
• Additional results loading infinitely as the user reaches the end of the current results via scrolling(NOTE: I have discovered that this functionality is built into the datatables plugin so I need to focus on the previous method).

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?

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

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.

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