使用Ajax数据的DataTables添加序列号时遇未知参数'nRow'错误

嘿，这个错误我之前也碰到过！本质原因是DataTables在渲染第一列（S.no）的时候，试图去数据源里找名叫nRow的字段，但你的Ajax返回数据里根本没有这个字段——毕竟序列号是我们自己要生成的，不是后端返回的嘛😉。下面给你两种靠谱的解决方法：

方法一：利用DataTables的columns.render自动生成序列号 #

这是最推荐的方式，直接在DataTables初始化配置里给序列号列指定渲染函数，不需要依赖后端数据：

$('#salestbl').DataTable({
  ajax: {
    url: '你的数据接口地址', // 替换成实际接口地址
    type: 'GET',
    dataSrc: '' // 根据你的返回数据结构调整，比如数据嵌套在`data`字段里就写'data'
  },
  columns: [
    {
      // 渲染序列号，meta.row是行索引（从0开始），加1得到从1开始的序号
      render: function(data, type, row, meta) {
        return meta.row + 1;
      }
    },
    { data: 'invoiceNumber' }, // 替换成你Ajax返回的对应字段名
    { data: 'totalAmount' },
    { data: 'discountAmount' },
    { data: 'totalTax' },
    { data: 'grandTotal' },
    { data: 'date' }
  ]
});

这个方法的好处是完全由DataTables管理序号，哪怕表格做了分页、排序操作，序号也会自动重新计算，非常省心。

方法二：手动拼接DOM时生成序列号 #

如果你是先通过Ajax获取数据，再手动把行拼接到tbody里，那可以在循环数据的时候直接计算序号：

$.ajax({
  url: '你的数据接口地址',
  type: 'GET',
  success: function(responseData) {
    let tableHtml = '';
    // 循环数据，index是当前行索引（从0开始）
    responseData.forEach((rowData, index) => {
      tableHtml += `
        <tr>
          <td>${index + 1}</td>
          <td>${rowData.invoiceNumber}</td>
          <td>${rowData.totalAmount}</td>
          <td>${rowData.discountAmount}</td>
          <td>${rowData.totalTax}</td>
          <td>${rowData.grandTotal}</td>
          <td>${rowData.date}</td>
        </tr>
      `;
    });
    // 把拼接好的HTML插入tbody
    $('#salestbl tbody').html(tableHtml);
    // 最后初始化DataTables
    $('#salestbl').DataTable();
  }
});

额外注意事项 #

不管用哪种方法，都要确保其他列的data属性和你Ajax返回的字段名完全匹配（包括大小写），比如后端返回的是invoice_number，你就不能写invoiceNumber，不然同样会触发类似的"未知参数"错误哦。

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