0

我正在尝试使用 dataTables 生成一个脚本，其中包含在连续循环中自动分页的数据页面。数据通过对数据库的 ajax 调用返回，每页显示两 (2) 条记录。

我遇到的问题是，如果我对脚本有效的数据行列表进行硬编码。但是，当我尝试使用 ajax 调用返回的数据时，它会显示每一页数据，然后返回到第一页并停止。经过一些测试后，我发现“pageInfo.end”生成的变量“endInt”填充在使用硬编码数据的脚本中，但在使用来自 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
} );
4

0 回答 0