How to add animated effect for auto datatable switching.

KalaMraKa

Hi all,

I have created a data table with the function of auto switching the table pages. but I can't figure out how to add animated effect to the table every time it switches the page. I attached my code below. $('#apinfo').addClass('animated fadeInDown') is where the animation kicks in, but it can only happen once since table.page(pageNum).draw(false) doesn't reload the page. It seems like I need to use draw(false) to keep the content the same so it can auto switch the pagination. Do you guys any any suggestion? Thank very mush for your help.

$(document).ready(function() {

$('#apinfo').DataTable({
        "searching": false
      });

var table = $('#apinfo').DataTable();
$('.dataTables_length').addClass('bs-select');

$('#apinfo').addClass('animated fadeInDown');

setInterval(function() {
    var info = table.page.info();
    var pageNum = (info.page < info.pages) ? info.page + 1 : 1;
    table.page(pageNum).draw(false);
}, 3000);

});

colin

Hi @KalaMraKa ,

Yep, as you say, you want to pass false or page into draw() to not reset the paging.

Cheers,

Colin

KalaMraKa

Hi Colin, @colin

Thank you for your replay. I'm using draw(false) so the page doesn't reset. However, if I pass true or page into draw(), it will not switch the page, I don't even have the pagination on the button, I will only have the scroll bar on the side. Please let me know if you have any other suggestion. Thank you very much for your time.

Best,
K

colin

Hi @KalaMraKa ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

KalaMraKa

Hi @colin

Thank you very much for replying. I created a test case with the link here: http://live.datatables.net/lifehoke/1/edit

My js include auto switching function and fixed row number. if you click the button "run with JS" after get in, you will notice that there is fade in down animation happens at very first of the page switching. I'm trying to make it happen on every switching but I failed. I really appreciate for your help, please let me know if you need any information from me.

Best,
K

colin

Hi @KalaMraKa ,

That was a fun programming exercise - here it is here. Hope that does the trick. In summary, I'm destroying the table with each draw, and just restarting at the next page.

Cheers,

Colin

KalaMraKa

Hi @colin

Thank you so so much. It works perfectly.

Best,
K