使用帶有DataTables的列名和AJAX數據源

Question

我正在嘗試升級我的系統使用1.10而不是1.9的DataTables，我正在嘗試找到一種方法來使用JSON對象而不是列表來傳回行內容。 具體而言，不是以[['data','data','data'],['data','data','data'],etc..]格式傳回數據[['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 （或其他一些我沒有找到的選項）中指定的列名而不是數字索引？

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)};
        }
    },