数据表：从 JSON 生成整个 table

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: undefined is not an object (evaluating '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"/>

并且数据表初始化变得非常简单：

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

这里不直接在dataTable上使用ajax属性的原因是由于javascript异步的性质。如果您在数据表上使用了 ajax url，它将在 之前创建 加载 JSON，因此它将失败，因为 columns 尚未定义。

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

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

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

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

数据表：从 JSON 生成整个 table

DataTables: Generate whole table from JSON

jquery

json

datatables

jquery-datatables-editor

datatables-1.10