jQuery DataTable动态构建对象数组无法加载数据问题

使用jQuery DataTable组件时，通过push方法动态构建对象数组作为数据源，表格无法加载数据；但直接初始化数组的方式，表格能正常显示数据。

动态构建数据源（无法加载数据） #

var tableData = [];
tableData.push({"groupName": "CASINOVI-LMSUTESTA"});

DataTable配置代码 #

var table_dmt = $("#detailsMobileTable").DataTable({
  "language": {
    search: '',
    searchPlaceholder: "Search",
    lengthMenu: "_MENU_",
    paginate: {
      first: `<i class="fas fa-angle-double-left"></i>`,
      previous: `<i class="fas fa-angle-left"></i>`,
      next: `<i class="fas fa-angle-right"></i>`,
      last: `<i class="fas fa-angle-double-right"></i>`
    }
  },
  lengthMenu: [
    [10, 25, 50, 100],
    ['10 entries', '25 entries', '50 entries', '100 entries']
  ],
  "filter": true,
  "bFilter": false,
  "bInfo": false,
  "bPaginate": true,
  "bInfo": true,
  "paging": true,
  "searching": true,
  "data": tableData,
  columns: [{
    data: 'groupName'
  }]
});

直接初始化数据源（可正常加载数据） #

var tableData = [{"groupName": "CASINOVI-LMSUTESTA"}];

问题分析与解决办法 #

两种方式构建的数组内容完全一致，问题出在配置项冲突或初始化时机上：

1. 清理冲突的配置项
   配置中存在多组重复且矛盾的设置（比如filter: true和bFilter: false、searching: true和bFilter: false），这些会干扰DataTable的正常渲染。修改后的配置如下：

   var table_dmt = $("#detailsMobileTable").DataTable({
     "language": {
       search: '',
       searchPlaceholder: "Search",
       lengthMenu: "_MENU_",
       paginate: {
         first: `<i class="fas fa-angle-double-left"></i>`,
         previous: `<i class="fas fa-angle-left"></i>`,
         next: `<i class="fas fa-angle-right"></i>`,
         last: `<i class="fas fa-angle-double-right"></i>`
       }
     },
     lengthMenu: [
       [10, 25, 50, 100],
       ['10 entries', '25 entries', '50 entries', '100 entries']
     ],
     "bInfo": true,
     "paging": true,
     "searching": true,
     "data": tableData,
     columns: [{
       data: 'groupName'
     }]
   });
   

2. 确保初始化时机匹配
   如果push操作是在表格初始化之后才执行的，DataTable不会自动监听数组变化，需要手动调用API更新表格：

   // 先初始化表格，暂不传入数据源
   var table_dmt = $("#detailsMobileTable").DataTable({
     "language": {
       search: '',
       searchPlaceholder: "Search",
       lengthMenu: "_MENU_",
       paginate: {
         first: `<i class="fas fa-angle-double-left"></i>`,
         previous: `<i class="fas fa-angle-left"></i>`,
         next: `<i class="fas fa-angle-right"></i>`,
         last: `<i class="fas fa-angle-double-right"></i>`
       }
     },
     lengthMenu: [
       [10, 25, 50, 100],
       ['10 entries', '25 entries', '50 entries', '100 entries']
     ],
     "bInfo": true,
     "paging": true,
     "searching": true,
     columns: [{
       data: 'groupName'
     }]
   });
   
   // 动态添加数据后更新表格
   var tableData = [];
   tableData.push({"groupName": "CASINOVI-LMSUTESTA"});
   table_dmt.clear().rows.add(tableData).draw();
   

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