使用具有 AJAX 数据源的 DataTables 的列名

Question

我正在尝试升级我的系统以使用 DataTables 的 1.10 而不是 1.9，并且我正在尝试找到一种使用 JSON 对象而不是列表来传回行内容的方法。具体来说，我不想以 [['data','data','data'],['data','data','data'],etc..] 格式传回数据，而是以 [['colA':'data','colB':'data','colC':'data']] 格式传回数据。

现在我的 AJAX 函数以那种格式返回数据，我正在尝试使用以下代码进行初始化：

$("table").DataTable({
    "columnDefs": [
        {"name": "wo_status", "title": "wo_status", "targets": 0},
        //repeat for each of my 20 or so fields
    ],
    "serverSide": true,
    "ajax": "url/to/ajax/function"
});

我的 AJAX 函数返回的结果是正确的，但是 DataTables 试图在第 0 行中找到索引 0 但找不到它，因为我的 table 单元格是按它们的列索引的名称而不是数字索引。有谁知道如何告诉 DataTables 使用 columnDefs 中指定的列名（或我没有找到的其他选项）而不是数字索引？

Answer 1

使用 columns.data 选项指定属性名称，如下所示：

$("table").DataTable({
    "columns": [
        { "data": "colA", "name": "colA", "title": "colA" },
        { "data": "colB", "name": "colB", "title": "colB" },
        { "data": "colC", "name": "colC", "title": "colC" }
        //repeat for each of my 20 or so fields
    ],
    "serverSide": true,
    "ajax": "url/to/ajax/function"
});

Answer 2

在 fnServerParams 函数中使用 forEach...

$("table").DataTable({

  "columns": [{
    "data": "colA"
  }, {
    "data": "colB"
  }, {
    "data": "colC"
  }],

  "serverSide": true,

  "ajax": "url/to/ajax/function",

  fnServerParams: function(data) {
      data['order'].forEach(function(items, index) {
          data['order'][index]['column'] = data['columns'][items.column]['data'];
    });
  },
});

Answer 3

谢谢@ahmeti，我已经更新了你的方法:)

ajax: {
        url: fetchUrl,
        data: function ( data ) {
            data['columns_map'] = {};
            data['columns'].forEach(function(item, index) {
                data['columns_map'][item.data] = data['columns'][index];
            });
            data['order'].forEach(function(item, index) {
                data['order'][index]['column'] = data['columns'][item.column]['data'];
            });
            return {"data": JSON.stringify(data)};
        }
    },

使用具有 AJAX 数据源的 DataTables 的列名

Using column names with DataTables with AJAX data source

javascript

ajax

jquery

datatables