DataTables：从JSON生成整个表

Question

我正在使用jQuery DataTables，并正在寻找一种如何从JSON完全生成DataTable的方法。这应该包括列数，它们的名称，行数据，但还可以包括其他设置（例如排序）。我已经看到这是可能的，但是在许多可能的方法中，对我来说工作并不多。

这是我的代码，您能帮我解决错误并详细说明当前的JSON配置吗？

JSON-尽可能放在此处：

{
    "columns": [
        [ "title" : "DT_RowId" ],
        [ "title" : "supplier" ],
        [ "title" : "color" ],
    ],
    "data": [
        [ "row_3", "small", "red" ],
        [ "row_3", "medium", "blue" ],
        [ "row_3", "medium", "blue" ],
        [ "row_11", "large", "blue" ],
    ]
}

JS：

$('#example').DataTable( {
    "ajax" : {
        "url": "http://127.0.0.1/tabledata.json",
        "type": "GET",
        "contentType" : "application/json",
        "dataType" : "jsonp",
    },
});

HTML-应该保留为最少：

<table id="example"></table>

当前错误：

TypeError：未定义不是对象（评估'e [i] .aDataSort'）

Answer 1

首先，您需要使JSON正确。不需要将每个column数组都作为数组，该data部分根本不是有效的JSON-它应该是名称->值对。如果您希望将所有信息都包含在传递的JSON中，则可以将以下布局用于tabledata.json：

{
    "columns": [
        { "data" : "DT_RowId", "title" : "Id" },
        { "data" : "supplier", "title" : "supplier" },
        { "data" : "color", "title" : "color" }
    ],
    "data": [
        { "DT_RowId" : "row_3", "supplier" : "small", "color" : "red" },
        { "DT_RowId" : "row_3", "supplier" : "medium", "color" : "blue" },
        { "DT_RowId" : "row_3", "supplier" : "medium", "color" : "blue" },
        { "DT_RowId" : "row_11", "supplier" : "large", "color" : "blue" }
    ]
}

最小标记：

<table id="example"/>

并且dataTable的初始化变得非常简单：

$.getJSON('http://127.0.0.1/tabledata.json', function(json) {
  $('#example').DataTable({
     data : json.data,
     columns : json.columns
  })
});

这里之所以不直接在dataTable上使用ajax属性，是因为javascript的非同步性。如果url在dataTable上使用ajax ，它将在加载JSON 之前创建，因此它将失败，因为columns尚未定义。

演示-> http://jsfiddle.net/xqu37Lka/

如果要在JSON中包含其他设置，只需将它们添加到JSON中，例如默认顺序：

{
    "columns": [...],
    "data" : [...],
    "order": [[ 3, "desc" ]]
}

并包含json.order在dataTable初始化中。