datatables auto pagination with data rows loading from top to bottom

bytec

Hi all,

I am using the code below to automatically paginate the rows and pages returnes by an Ajax call.
The rows of data load from top to bottom using:

$("table tr").hide();
$("table tr").each(function(index){
  $(this).delay(index*100).show(500);
});

All work fine apart from when the the pagination happens it reloads the column header row ( <thead> ..... </thead>, is there
away to just get the data rows to display/refresh in the <tbody>.....</tbody>. I can see why the <thead> ..... </thead> is reloads/refreshing because it contains a <tr>......</tr>.

Below is the complete code that oerorms the pagination:

 // START OF LOOP
  initComplete: function(settings, json){ 
    pageInfo = table.page.info(),
    endInt = pageInfo.end,

    currentpage = pageInfo.page +1;
    console.log("PAGE", currentpage);
    document.getElementById("CurrentRows").innerHTML = currentpage;
    // Current page
    currentInt = 0,
    interval = setInterval(function(){
    table.page( currentInt ).draw( 'page' );
    $("table tr").hide();
    $("table tr").each(function(index){
        $(this).delay(index*100).show(500);
    });


    currentInt++;
    //console.log(currentInt);

    if ( currentInt ===  endInt)
      currentInt = 0;
      //$('#fidsTable').addClass('animated fadeInDown');
      $('#fidsTable tbody').fadeIn(800);
      if ( currentInt == 0) {
        table.ajax.reload();

    }

    }, 12000); 

   }
   // END OF LOOP

colin

I'm not clear what you're trying to achieve with those delays. 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

bytec

Hi Colin,

I have tried to create a test case at the following link. I think I have done it right.

I'm not sure why it's not running in the test case as it does on my PC.

http://live.datatables.net/titeyipi/1/edit?html,js,console,output

bytec

Hi Colin,

New link to test case.

http://live.datatables.net/titeyipi/2/edit

kthorngren

Your test case is getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'mData')

You have 6 columns defined in your header but 7 in the tbody. Please fix this and let us know the steps to recreate the problem.

Like Colin I'm not sure what exactly you are trying to do.

All work fine apart from when the the pagination happens it reloads the column header row

Are you referring to the ajax.relaod()? Do you mean its going back to the first page or is there something that happens with the header when using ajax.reload(). Please describe more about the problem and the issue with the header.

Kevin

bytec

Hi kthorngren the test case does show 6 columns in the header and 6 in the tbody.

<thead>
<tr>
<th>Time</th> //1
<th>Logo</th> //2
<th>Departing from</th> //3
<th>Temp</th> //4
<th>Flight No</th> //5
<th>Status</th> //6
</tr>
</thead>

columns: [
{ data: "ScheduleTime", width: '10%'}, //1
{ data: "Image", width: '10%', render : function (data, type){ //2
return '<img class="responsive" src="' + airlineimage + '' + data + '"/>';
}
},
{ data: "AirportName", width: '20%'}, //3
{ data: "Temp", width: '10%'}, //4
{ data: "Flight", width: '22%'}, //5
{ data: "RemarksWithTime", width: '27%'}, //6
],

With that said, all I am trying to do is to get the data rows refresh and load from top to bottom but not the column header columns. The script gets the data from the Ajax call and then displays it 5 rows on each page. It auto paginates to the next page until the last page has displayed, and then loops to the beginning and starts the pagination again. Once the last page has display it then call the "table.ajax.reload()" to refresh the data.

kthorngren

The rows in the tbody have 7 columns which is resulting in the error:

        <td width="9%" >10:10</td>
        <td width="13%" class="flightlogo"><img src="../../../../../../airline_logos/fr.gif" alt="." /></td>
        
        <td width="16%">Alicante</td>
        <td><span class="temperature">
          22 &deg;C</td>
        <td width="15%">FR2152</td>

        <td width="11%"></td>
        <td width="24%">Boarding</td>

get the data rows refresh and load from top to bottom but not the column header columns.

Are you referring to this section of code?

          $("table tr").hide();
          $("table tr").each(function(index){
            $(this).delay(index*100).show(500);
          });

If so you might need to change the selector to something like this $("table tbody tr") so it only affects the tbody rows.

Kevin

bytec

Hi kthorngren , my sincere apologizes, was not looking at the HTML. I have corrected the column issue.

Hi Kevin, Many thanks for your reply, that fixed my issue.

kthorngren

No problem. Glad you got it working!

Kevin