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

我試圖升級我的系統以使用1.10而不是1.9的DataTables，我試圖找到一種方法來使用JSON對象而不是名單。具體而言，我不想以格式[['data','data','data'],['data','data','data'],etc..]傳回數據，我想以格式[['colA':'data','colB':'data','colC':'data']]。使用帶有AJAX數據源的DataTables的列名

現在我已經得到了我的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功能正常回來，但數據表是試圖在0行中找到0的索引，並且無法找到它，因爲我的表格單元格是按其列名稱而不是數字索引進行索引的。有誰知道如何告訴DataTables使用columnDefs（或其他一些我沒有找到的選項）中指定的列名而不是數字索引？如下圖所示

來源

2015-08-20 Jesse Green

使用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" 
});

來源

2015-08-20 18:59:27

使用的forEach在fnServerParams功能...

$("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']; 
    }); 
    }, 
});

來源

2017-02-04 08:04:07 ahmeti

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

來源

2017-11-09 17:36:51 madzohan

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

回答

相關問題