Geek Answers Handbook

JQuery datatables Twitter / facebook style paging

I was looking for a suitable resource on how to do this without any luck. I am using jQuery datatables plugin with server processing and pipelining support ( example ). This works for me in my asp.net webforms project and will go into MVC for future projects. I care about server side processing with the class found here . I also looked at a found article here related to pagination.

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

Note: By Twitter / style paging, I mean:

  • One button at the bottom of the table that returns additional results added to existing content in the table
  • Additional results are loaded endlessly when the user reaches the end of the current results by scrolling (NOTE: I found that this function is built into the datatables plugin, so I need to focus on the previous method).

Ultimately, I would like to have a choice between the two types of pagination above.

Does anyone have any good tips and / or samples / study guides for publication?

+5
source share
1 answer

PageLoadMore , " ".

  • JavaScript jQuery jQuery DataTables.
  • " " btn-example-load-more .

  • :

    $(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: " " .

0

More articles:


All Articles