jQuery DataTable - 显示具有自定义 JSON 结构的数据

Question

如何使用 jQuery 数据表填充自定义 JSON 数据结构。我在下面找到了解决方案（数据表默认 - JSON 结构）并且它工作正常，直到我将“数据”作为主要 object/array，但是，我想利用另一个 JSON 结构（我的 JSON 结构）。有可能还是我需要坚持使用 Datatable 默认 JSON 结构？我正在使用 DataTables 1.10.7。在此先感谢您的帮助。

数据表默认 - JSON 结构

{
 "data": [
{
  "name": "Tiger Nixon",
  "position": "System Architect",
  "salary": "0,800",
  "start_date": "2011/04/25",
  "office": "Edinburgh",
  "extn": "5421"
},
{
  "name": "Garrett Winters",
  "position": "Accountant",
  "salary": "0,750",
  "start_date": "2011/07/25",
  "office": "Tokyo",
  "extn": "8422"
}
]
}

我的JSON结构

[
{
  "Date": "12/04/14",
  "MeterID": "56",
  "BlockID": "12",
  "Type": "sure",
  "Subtype": "truction",
  "Notes": ""
},
{
  "Date": "12/04/14",
  "MeterID": "3456",
  "BlockID": "123456",
  "Type": "alism",
  "Subtype": "working",
  "Notes": "Lorem"
}
]

jQuery 数据表代码片段

$('#incident').DataTable({
    "ajax": "../../data/object.json",
    "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "salary" },
        { "data": "start_date" },
        { "data": "office" },
        { "data": "extn" }
    ],
    "iDisplayLength": 10
})

Answer 1

这是我的做法。

$('#divWorkQueueTable').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="workQueueTable"></table>');
    $('#workQueueTable').DataTable({
        "data": requests,
        "columns": [{
            "title": 'ID',
            "data": "ID",
            "sWidth": "5%",
            "render": function(data) {
                return '<a href="javascript:;" onclick="modARBRequest.Load( \'' + data + '\')">' + data + '</a>';
            }
        }, {
            "title": "Project ID",
            "data": "ProjectID",
            "sWidth": "10%"
        }, {
            "title": "Phase",
            "data": "Phase",
            "sWidth": "5%"
        }, {
            "title": "Project Description",
            "data": "Title",
            "sWidth": "50%"
        }, {
            "title": "Date Requested",
            "data": "DateRequested",
            "sWidth": "10%",
            "render": function(data) {
                return modCommon.DateToString(data);
            }
        }, {
            "title": "Stage",
            "data": "Stage",
            "sWidth": "15%"
        }, {
            "title": "Status",
            "data": "Status",
            "sWidth": "10%"
        }]
    });

所以如果我是你，我会尝试解析 ajax 请求并将解析的数据传递给数据 table。查看您的 "data" 行，它们似乎与您的 json 不对应。我错过了什么吗？

所以你需要像 "data":"Date", "data": "MeterID", "data": "BlockID" 等等...

$('#incident').DataTable({
"ajax": "../../data/object.json",
"columns": [
    { "data": "Date" },
    { "data": "MeterID" },
    { "data": "BlockID" },
    { "data": "Type" },
    { "data": "Subtype" },
    { "data": "Notes" }
],
"iDisplayLength": 10

})

Answer 2

阅读此 solution，它将解决您的疑问..

jQuery DataTable - 显示具有自定义 JSON 结构的数据

jQuery DataTable - Displaying data with custom JSON structure

javascript

datatable

jquery

json