jQuery DataTable列数不匹配时如何获取行数据的额外id字段

表格仅需展示5列数据，但需要获取每一行返回数据中的额外id字段。直接在columns配置中新增{data: 'id'}项时，会因为表头列数小于单元格数据列数触发报错。目前服务端已经在响应结果中正确返回了id字段，对应后端代码：

$arr["id"] = $row["id"];

错误的配置写法如下：

columns: [
  { data: 'sno' },
  { data: 'category' },
  { data: 'subcategory' },
  { data: 'netchange' },
  { data: 'stock' },
  { data: 'num' },
  { data: 'id' }  // 直接新增该项会触发列数不匹配报错
],

你可以根据自己的使用场景选下面任意一种方案，都不会触发列数报错：

• 方案1：配置为隐藏列
  如果需要id参与表格的内置排序、查询等逻辑，直接给id对应的列配置加上visible: false即可。该配置会让DataTables加载该字段数据，但不会在页面渲染可见列，不会和现有表头列数冲突：

  columns: [
    { data: 'sno' },
    { data: 'category' },
    { data: 'subcategory' },
    { data: 'netchange' },
    { data: 'stock' },
    { data: 'num' },
    { data: 'id', visible: false } // 隐藏列，不占用可见表头位置
  ],
  

• 方案2：不额外加列配置，直接通过API取原始数据
  如果只是在事件回调、自定义渲染逻辑里用id，完全不需要把id加到columns配置里。DataTables默认会存储每一行的全量返回数据，随时可以通过API读取：

  • 行点击、操作按钮点击等场景取id：

    $('#yourTable').on('click', '.edit-btn', function() {
      // 先获取按钮所在行的DataTable行实例
      const row = $('#yourTable').DataTable().row($(this).parents('tr'));
      const rowData = row.data();
      const currentId = rowData.id; // 直接读取服务端返回的id字段
      // 后续业务逻辑
    });
    

  • 列自定义render函数里取id：
    render函数接收的第三个参数就是当前行的全量数据，直接读取即可，不需要给id单独配列：

    columns: [
      { data: 'sno' },
      { data: 'category' },
      { data: 'subcategory' },
      { data: 'netchange' },
      { data: 'stock' },
      { data: 'num' },
      { 
        data: null, // 操作列不需要绑定对应字段
        render: function(data, type, row) {
          const currentId = row.id; // 直接拿到当前行id
          return `<button data-id="${currentId}">编辑</button>`
        }
      }
    ]
    

注意：不要为了拿额外字段强行给columns加无配置的项，只要服务端把字段返回了，不管有没有在columns里声明，都可以通过行数据API拿到。

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