Pagination plug-in | Automatic Pagination

amommendes

Dear all,

Is there some way to change pages automatically, in a time interval?

Thanks in advance

jLinux

No plugin.. But theres a super-duper-awesome API that can do it.

I was able to get this done in less than 10 lines of code.

var pageInfo = table.page.info();

var interval = setInterval(function(){
    table.page( 'next' ).draw( 'page' );

    if(table.page()+1 === pageInfo.end)
        clearInterval(interval);
}, 3000);

Working example

amommendes

Hello!!

You are right, awsome API.
Thank you so much!!

Regards...

allan

This is why I love doing DataTables. I wouldn't have thought of doing something quite like that - despite having written dashboard pages in the past.

Nice work all around :-)

Allan

jLinux

Same. Actually, im creating a dashboard that ill use it for.

I think ill have the interval quit when anything is clicked or focused though.

amommendes

Thanks jLinux!
I also need this to do a Dashboard and it will work very well...

I'm very new to js. How could I create a loop in your code, in order to return to the first page from the table when table.page()+1 === pageInfo.end ?

I was trying the follow:

$(document).ready( function () {
                  var table = $('#example').DataTable({ pageLength: 5
 });
   var pageInfo = table.page.info();  var interval = setInterval(function(){
   table.page( 'next' ).draw( 'page' );
               if ( table.page()+1 === pageInfo.end )
                       table.page( 'first' ).draw( 'page' );
                               }, 3000);
 } );

jLinux

Sure

$(document).ready( function () {
  var table = $('#example').DataTable({
    pageLength: 5
  });
  
  // Get the page info, so we know what the last is
  var pageInfo = table.page.info(),
      
      // Set the ending interval to the last page
      endInt = pageInfo.end,
      
      // Current page
      currentInt = 0,
  
      // Start an interval to go to the "next" page every 3 seconds
      interval = setInterval(function(){
          // "Next" ...
          table.page( currentInt ).draw( 'page' );
        
          // Increment the current page int
          currentInt++;
          
          // If were on the last page, reset the currentInt to the first page #
          if ( currentInt ===  endInt)
            currentInt = 0;
 
      }, 3000); // 3 seconds
} );

http://live.datatables.net/xikefome/3/edit?js,output

That starts the loop over.. is that what you wanted?

If you just wanted it to go back to the first page and clear, then this should suffice

jLinux

If you want it to quit when they click on anything for the table, you can use

$('div.dataTables_wrapper').click(function(){
   clearInterval(interval);
});

However though, that CSS Selector isn't table-specific, it will cover any DataTable, so if you have multiple tables, if any of them are clicked on, then it will stop the auto-pagination.

I thought about using something like

$(table.table().node()).click(function(){
   clearInterval(interval);
});

And even though thats table specific, it only covers the actual table, not the pagination div, the length selector, select box, etc

amommendes

Perfect jLinux!
Thanks again! It was very, very useful!!!

jLinux

Hey, thanks for the great idea

amommendes

jLinux,

By the way, are you implementing this dashboard with datatables in Pentaho CDE?

jLinux

I have no idea what pentaho cde is

amommendes

Ok! :)

Thanks again!!

allan

I didn't either - but it looks fairly cool. Must update my own at some point...

Allan

amommendes

Really, it is.. There is a community free and open source. They use dataTable to renderize table on dashboards.

allan

Must be good then ;-).