DataTables：从 JSON 生成整个表

Posted 2023-05-07

【中文标题】DataTables：从 JSON 生成整个表

【英文标题】：DataTables: Generate whole table from JSON

【发布时间】：2016-02-14 09:47:10

【问题描述】：

我正在使用 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 (evalating 'e[i].aDataSort')

【参考方案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 的异步性。如果您在 dataTable 上使用了 ajax url，它将在 加载 JSON 之前创建，因此它将失败，因为尚未定义 columns。

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

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

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

并在数据表初始化中包含json.order。

【讨论】：

调整您的答案存在一个问题，我的浏览器要求将 contentType: "application/json", dataType: "jsonp" 附加到 HTTP 请求标头。我看不到它可以附加到您的 dataTable 初始化脚本的位置。可能我需要一个使用$.ajax() 调用的变体。

通过在$.ajax() 调用的success 函数中调用它来工作。感谢您的热心帮助。

@PeterGerhat，是的 - getJSON 只是一个简单的包装器，$.ajax 也很好。当您写上面的评论时，我实际上正在处理$.ajax 示例。感谢您接受答案。