分页结束时使用Ajax和dataTables重载数据的实现问题

现有代码核心问题 #

• 变量逻辑错误：使用pageInfo.end（当前页最后一条数据的索引）作为翻页终止判断依据，实际应该调用pageInfo.pages获取总页数做判断
• 语法错误：initComplete回调函数后多了多余的右大括号，同时存在重复的dom配置项
• ajax.reload()默认会重置分页到第一页，需要添加第二个参数禁用分页重置逻辑
• 未处理数据更新后总页数变化的场景，原有总页数只在初始化时获取一次，数据更新后不会同步

修正后完整代码 #

var airlineimage = '../../';
var pageInfo;
var currentInt;
var interval; // 存储定时器避免重复创建
var table; // 显式声明table变量避免全局污染
$(document).ready( function () {
  table = $('#fidsTable').DataTable( {  
    ajax: {
      url: 'get_fids.php', 
      dataSrc: '',
    },
    pageLength: 5, 
    responsive: true,
    ordering: false,
    autoWidth: false,
    paging: true,
    searching: false,
    orderable: false,
    info : false, 
    dom: '<"bottom"i>rt<"clear">',
    language: {
       "emptyTable": "There are no flights for <?php echo $date; ?>"
    },
    columns: [
      { data: "ScheduleTime", width: '7%'},
      { 
        data: "Image",
        width: '20%',
        render : function (data, type){
          return '<img src="' + airlineimage + data + '" />';
        }
      },
      { data: "AirportName",  width: '20%'},
      { data: "Temp",  width: '20%'},
      { data: "Flight",  width: '12%'},
      { data: "RemarksWithTime", width: '11%'},
    ],
    rowCallback: function(row, data){ 
      $('td:eq(1)', row).find("span").css({color: "blue" });
    },
    initComplete: function(settings, json){ 
      pageInfo = table.page.info();
      let totalPages = pageInfo.pages;
      currentInt = 0;
      // 初始化前清空已有定时器，避免异常重复创建
      if(interval) clearInterval(interval);
      interval = setInterval(function(){
        table.page( currentInt ).draw( 'page' );
        currentInt++;
        // 翻到最后一页时触发数据刷新
        if (currentInt === totalPages) {
          // 第二个参数设为false，禁用分页重置，避免跳回第一页
          table.ajax.reload(function(newData){
            // 数据加载完成后更新总页数，适配数据条数变化场景
            pageInfo = table.page.info();
            totalPages = pageInfo.pages;
            currentInt = 0;
          }, false);
        }
      }, 3000); // 每页停留3秒
    }
  });
});

核心改动说明 #

• 修正了语法错误，移除了重复配置和多余符号
• 使用总页数作为翻页终止判断依据，逻辑更准确
• 刷新数据时保留当前分页状态，不会出现跳回第一页的问题
• 每次数据刷新后同步更新总页数，适配数据条数动态变化的场景
• 新增定时器清理逻辑，避免重复生成定时器导致页面卡顿

内容的提问来源于stack exchange，提问作者DCJones