Блог

Я пытаюсь создать сценарий, используя таблицы данных со страницами данных, которые автоматически разбиваются на страницы в непрерывном цикле. Данные возвращаются с помощью вызова ajax в базу данных и отображаются по две (2) записи на странице.

Проблема, с которой я сталкиваюсь, заключается в том, что я жестко кодирую список строк данных, которые работает скрипт. Но когда я пытаюсь использовать данные, возвращаемые вызовом ajax, он отображает каждую страницу данных, а затем возвращается на первую страницу и останавливается. После некоторого тестирования я обнаружил, что переменная «endInt», созданная «pageInfo.end», заполняется в сценарии, использующем жестко закодированные данные, но в сценарии, использующем данные из вызова ajax, «endInt» пуста. Может ли кто-нибудь увидеть, где я ошибаюсь.

Это код с жесткими кодовыми строками данных.

 <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
} );
 

Это код, который использует данные, возвращаемые вызовом ajax.

 <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
} );