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

Posted 2023-05-07

【中文标题】使用带有 AJAX 数据源的 DataTables 的列名

【英文标题】：Using column names with DataTables with AJAX data source

【发布时间】：2015-11-14 11:35:49

【问题描述】：

我正在尝试升级我的系统以使用 1.10 而不是 1.9 的 DataTables，并且我正在尝试找到一种方法来使用 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 并且未能找到它，因为我的表格单元格是按其列名而不是数字索引来索引的。有谁知道如何告诉 DataTables 使用columnDefs（或我没有找到的其他选项）中指定的列名而不是数字索引？

【参考方案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"
);

【讨论】：

是否需要此设置才能使用 table.ajax.reload(); Ajax 重新加载似乎不适用于 column_def

为什么要定义data、name和title？ name 还不够吗？

@Armitage2k，您不必定义name 和title，它们在原始问题中。通常data 就足够了。

【参考方案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'];
    );
  ,
);

【讨论】：

谢谢。你已经展示了秘宝之路

【参考方案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);
        
    ,