jQuery DataTables动态添加带data-order行报错且显示异常问题

问题根源 #

当表格初始行的<td>带有data-order属性时，DataTables会自动将每一行的数据解析为对象结构（每个列对应包含display和order的对象）。而你动态添加的是数组格式的数据，两者类型不匹配，就会触发Requested unknown parameter '[object Object]'错误，同时日期列因无法匹配对象属性而不显示。

解决方案 #

提供两种可行方案，按需选择：

方案1：动态添加时使用对象格式

直接按照DataTables解析后的对象结构添加行，每个列的数据对应包含display（显示文本）和order（排序值）的对象：

$(document).ready(function() {
  let myTable = $('#example').DataTable({
    responsive: true
  });

  $('#add').on('click', function() {
    // 构造与DataTables解析后一致的对象格式数据
    const newRow = [
      {
        display: 'Nov 2016',
        order: 1477929600 // Nov 2016对应的时间戳
      },
      '<button>Edit</button>'
    ];
    myTable.row.add(newRow).draw(false);
  })
});

方案2：初始化时强制使用数组格式

通过配置columns选项，强制DataTables使用数组索引作为数据源，同时手动处理排序逻辑（读取data-order属性）：

$(document).ready(function() {
  let myTable = $('#example').DataTable({
    responsive: true,
    columns: [
      {
        data: 0, // 强制使用数组第0项作为数据源
        // 排序时提取td的data-order值
        orderData: function(row, type) {
          if (type === 'sort') {
            return $(row[0]).attr('data-order');
          }
          return row[0];
        },
        render: function(data) {
          return data; // 渲染显示内容
        }
      },
      { data: 1 } // 第二列直接使用数组第1项
    ]
  });

  $('#add').on('click', function() {
    // 动态添加时构造带data-order的td字符串
    const dateTd = '<td data-order="1477929600">Nov 2016</td>';
    const newRow = [
      dateTd,
      '<button>Edit</button>'
    ];
    myTable.row.add(newRow).draw(false);
  })
});

方案对比 #

• 方案1：代码简洁，完全贴合DataTables的自动解析逻辑，无需额外配置。
• 方案2：保持数组操作习惯，适合已有大量数组格式数据的场景，但需要手动处理排序逻辑。

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