Jquery-Ajax无法填充dataTables表格问题求助

我正在开发一个基于Bootstrap、DataTables和Ajax的页面，需求是用户点击导航标签后，对应的数据表格加载并展示数据。目前遇到的问题是，Ajax返回的正确数据无法填充到id为#table的表格中。

当前逻辑是：点击标签时，先检查DataTables是否已初始化，若已初始化则执行destroy()，再重新初始化表格。如果不执行destroy()，会抛出初始化错误。已经确认Ajax返回的数据格式和内容都是正确的，求排查表格无法填充数据的原因。

HTML导航标签部分 #

<div class="TabButtonDiv">
  <ul class="nav nav-tabs"  id="myTab">
    <?php if(!empty($Route1)){ ?>
    <li class="nav-item"> <a href="#route_1" role="tab" id="<?php echo $Route1;?>" data-toggle="tab"><?php echo $Route1 . " - ". $Ter1;?></a> </li>
    <?php } ?>
    <?php if(!empty($Route2)){ ?>
    <li class="nav-item"> <a href="#route_2" role="tab" id="<?php echo $Route2;?>" data-toggle="tab"><?php echo $Route2 . " - ". $Ter2;?></a> </li>
    <?php } ?>
  </ul>
</div>    

HTML表格容器部分 #

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade active in" id="tabs">
    <table name="timeline" border="1" cellpadding="0" cellspacing="0" class="table table-striped"  id="table" width="100%" data-role="datatable"   data-info="false">
     <thead>
        <tr>
          <th>No</th>
          <th>Ter</th>
          <th>Time</th>
        </tr>
      </thead>
      <tbody class="CurrentBooking-rows">
      </tbody>
    </table>
  </div>
</div>

jQuery/DataTables/Ajax逻辑部分 #

$(document).ready(function() {
  $('#myTab a').on('shown.bs.tab', function(event) {
    var target = $(event.target).attr("href");
    
    var tableName = $('#Route').attr('name');
    console.log("TAB ", target);
    console.log("TABLE 1 ", tableName);
    if ($(tableName).find('#Route').hasClass('table')) {
      console.log("TABLE 2 ", tableName);
      $(tableName).find('#Route').DataTable().destroy();
    }
    // Initialize DataTable for the current tab
        table = $('#Route').DataTable( {
        createdRow: function(row, data, dataIndex) {
            $('td:eq(0)', row).css('padding-left', '2px');
            $('td:eq(1)', row).css('padding-right', '2px');
        },
        responsive: true,
        autoWidth: false,
        retrieve: false,
        paging: false,
        searching: false,
        scrollY: "550px",
        scrollCollapse: true,
        ajax: {
    "type": "POST",
    "data":{Code:target},
    dataType: 'JSON',
            url: 'get_h_times.php',
            dataSrc: '',
        },
        language: {
            "emptyTable": "There are no times for " + target + ""
        },
        columnDefs: [{

                "orderable": false
            },
            {
                "width": "10%",
                "targets": 0
            },
            {
                "width": "10%",
                "targets": 1
            },
            {
                "width": "10%",
                "targets": 2
            },
            {
                "className": "text-center"
            },

        ],
        columns: [{
                data: 'RecordID',
                "visible": false
            },
            {
                data: "No",
                width: '10%'
            },
            {
                data: "Ter",
                width: '10%'
            },
            {
                data: "Time",
                width: '33%'
            },

        ],
        "initComplete": function(settings, json) {
            $('body').find('.dataTables_scrollBody').addClass("scrollbar");

        },

    });

});

问题根源排查 #

1. 核心选择器错误：HTML表格的id是#table，但JS代码全程用$('#Route')选择表格——页面中根本不存在id为Route的元素，所有初始化、销毁操作都指向了无效对象，自然无法填充数据。
2. 销毁逻辑完全失效：var tableName = $('#Route').attr('name');因为目标元素不存在，tableName会是undefined，后续的销毁判断和操作完全没有意义。

修复后的代码示例 #

修正后的jQuery逻辑 #

$(document).ready(function() {
  // 缓存表格元素，减少重复DOM查询
  const $table = $('#table');
  let dataTableInstance = null;

  $('#myTab a').on('shown.bs.tab', function(event) {
    const target = $(event.target).attr("href");
    
    // 销毁已存在的DataTables实例
    if (dataTableInstance) {
      dataTableInstance.destroy();
      $table.find('tbody').empty(); // 清空旧数据
    }

    // 初始化新的表格实例
    dataTableInstance = $table.DataTable({
      createdRow: function(row, data, dataIndex) {
        $('td:eq(0)', row).css('padding-left', '2px');
        $('td:eq(1)', row).css('padding-right', '2px');
      },
      responsive: true,
      autoWidth: false,
      retrieve: false,
      paging: false,
      searching: false,
      scrollY: "550px",
      scrollCollapse: true,
      ajax: {
        type: "POST",
        data: { Code: target },
        dataType: 'JSON',
        url: 'get_h_times.php',
        dataSrc: '',
      },
      language: {
        emptyTable: "当前线路 " + target + " 暂无数据"
      },
      columnDefs: [
        { orderable: false },
        { width: "10%", targets: 0 },
        { width: "10%", targets: 1 },
        { width: "10%", targets: 2 },
        { className: "text-center" }
      ],
      columns: [
        { data: 'RecordID', visible: false },
        { data: "No", width: '10%' },
        { data: "Ter", width: '10%' },
        { data: "Time", width: '33%' }
      ],
      initComplete: function(settings, json) {
        $('body').find('.dataTables_scrollBody').addClass("scrollbar");
      }
    });
  });
});

额外优化建议 #

• 缓存DOM元素，避免重复查询提升性能
• 用变量存储DataTables实例，销毁逻辑更可靠
• 销毁后清空表格内容，防止旧数据残留
• 替换英文提示为中文，优化用户体验

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