jQuery datatables Twitter/facebook style paging

Question

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?

Did this ever get figured out? I have the same issue two years later. — TJ Sherrill, May 31 '13 at 22:08
The best thing you can do is to make it from scratch. Its good to use libraries/plugins but later on if you want to update, it will be hard for you. Goodluck! :) — Vandolph Reyes, Apr 16 '17 at 06:09

score 0 · Answer 1 · answered Jul 31 '17 at 14:30

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

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

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.

getting error will u plz help: Uncaught TypeError: this.api(...).page.hasMore is not a function at a.fn.init.drawCallback — SHEKHAR SHETE, Oct 14 '22 at 07:02

jQuery datatables Twitter/facebook style paging

1 Answers1

Linked