dataTables with the pages of data that auto pagination in a continuous loop

bytec

After my original question I did some testing and found what is causing the issue, so I thought I would ask the question again with my findings. I am trying to produce a script using dataTables with the pages of data that auto pagination in a continuous loop.
The data is returned via an ajax call to a database and is displays two (2) records per page.

The issue I have is if I hard code a list of data rows the script works. But, when I try to use the data returned by the ajax call
it displays each page of data and then returns to the first page and stops. After doing some testing I found that the variable "endInt" produced by "pageInfo.end" is populated in the script that uses the hard coded data but in the script that uses the data from the ajax call the "endInt" is empty. Can anyone see where I am going wrong. I can't produce a live test case, this would mean giving access to my server so I thought I would provide the code below working and not working.

The is the code with hard code rows of data.

<table name="fids" border="0" cellpadding="0" cellspacing="0" class="table table-striped"   id="glafids" width="100%" data-role="datatable"   data-info="false">
<thead>
      <tr>
        <th>Image</th>
        <th>Time</th>
        <th>Departing to</th>
        <th>Flight No</th>
        <th>Terminal</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>06:00</td>
        <td>Heathrow</td>
        <td>BA123</td>
        <td>5/td>
        <td>On time</td>
      </tr>
      <tr>
        <td>2</td>
        <td>06:20</td>
        <td>Glasgow</td>
        <td>FR4536</td>
        <td>1</td>
        <td>On time</td>
      </tr>
      <tr>
        <td>3</td>
        <td>07:03</td>
        <td>Cardiff</td>
        <td>08:00</td>
        <td>5</td>
        <td>On time</td>
      </tr>
      <tr>
        <td>4</td>
        <td>07:15</td>
        <td>Birmingham</td>
        <td>BA2341</td>
        <td>5</td>
        <td>On time</td>
      </tr>
      <tr>
        <td>5</td>
        <td>07:35</td>
        <td>Glasgow</td>
        <td>BA4532</td>
        <td>5</td>
        <td>On time</td>
      </tr>

    </tbody>
</table>

$(document).ready( function () {
var table = $('#glafids').DataTable({
  pageLength: 2
});

// 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;
        console.log("currentInt", currentInt);
        console.log("endInt", endInt);

  }, 3000); // 3 seconds
} );

This is the code that uses the data returned by the ajax call.

<table name="fids" border="0" cellpadding="0" cellspacing="0" class="table table-striped"   id="glafids" width="100%" data-role="datatable"   data-info="false">
  <thead>
    <tr class="CenterHeaderSignageData">
      <th scope="col"></th>
      <th scope="col">Time</th>
      <th scope="col">Departing to</th>
      <th scope="col">Flight No</th>
      <th scope="col">Terminal</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

$(document).ready( function () {
var imagepath = "../../../../../../";
var table = $('#glafids').DataTable( {   
    pageLength: 2,
    lengthChange: false,
    responsive: true,
    autoWidth: false,
    ordering: false,
    searching: false,
    scrollCollapse: true,
    binfo:     false,
    dom: "lfrti", // HIDE NAV 
    bFilter: false,
    bLengthChange: false, // HIDE SHOW ENTERIES
  ajax: {
    url: 'get_fids.php', 
    dataSrc: '',
 },
  language: {
  "emptyTable": "There are no more departures for <?php echo $date; ?>"
  },
  columns: [
  { data: "Image", width: '10%', render : function (data, type){
    if (data === "") {
    return '<img src="' + noimage + '"/>';
    } else {
    return '<img src="' + imagepath + '' +data+'" />';
    }
   }
  },
  { data: "ScheduleTime", width: '10%' },
  { data: "AirportName",  width: '38%'},
  { data: "Flight",  width: '12%'},
  { data: "Terminal",  width: '12%'},
  { data: "RemarksWithTime",  width: '12%'}
  ],
});


  // 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;
        console.log("currentInt",currentInt);
        console.log("endInt",endInt);

  }, 3000); // 3 seconds
} );

sandy

Hi @bytec ,

I've created a test case from our examples using the code you have provided above. It seems to be working fine...

Could you try changing it to reproduce the error that you are having?

Thanks,
Sandy

kthorngren

I think you are using the wrong information from the page.info() API. From teh docs:

end - Display index for the last record shown on the current page

I think you want to use pages to get the total number of pages:

pages - Total number of pages

Kevin

bytec

Hi sandy, thanks for your reply. I have used your script code substituting the ajax call with " ajax: {
url: 'get_fids.php',
dataSrc: '',

},"

It still does not work. In the browser console I get as each page of data is displayed. It's the "endint2 is not getting populated. Any idea why because this only happends when call the data from the database with the ajax call.

currentInt 1
fids_pag_iframe_test.php:186 endInt 0
fids_pag_iframe_test.php:185 currentInt 2
fids_pag_iframe_test.php:186 endInt 0
fids_pag_iframe_test.php:185 currentInt 3
fids_pag_iframe_test.php:186 endInt 0
fids_pag_iframe_test.php:185 currentInt 4
fids_pag_iframe_test.php:186 endInt 0
fids_pag_iframe_test.php:185 currentInt 5
fids_pag_iframe_test.php:186 endInt 0
fids_pag_iframe_test.php:185 currentInt 6
fids_pag_iframe_test.php:186 endInt 0
fids_pag_iframe_test.php:185 currentInt 7
fids_pag_iframe_test.php:186 endInt 0
fids_pag_iframe_test.php:185 currentInt 8
fids_pag_iframe_test.php:186 endInt 0

kthorngren

The other thing you should do is move the code into initComplete. ajax is an asynchronous operation to the setup code is executed before the ajax response and before Datatables is fully initialized with the data. So the information needed for page.info() is not available when executed.

Kevin

bytec

Hi Kevin, which part of the code should I move into initComplete, I am totally lost. Thanks for your help.

kthorngren

Lines 55-78. Like this:
http://live.datatables.net/norumuja/3/edit

Kevin

bytec

Hi Kevin, many thanks, working apart from the ajax call only runs once when I need the table to refresh it's data, can that be done or do I have to do another ajax call. Sorry to be a pain and thanks again.