如何将动态json加载到jquery数据表答案

【问题标题】：how to load dynamic json to jquery datatable如何将动态json加载到jquery数据表
【发布时间】：2015-09-23 19:46:17
【问题描述】：

我想将动态数据加载到我的 jquery 数据表中。这意味着，在我从服务器获取 json 数据之前，我不知道它包含哪些字段，但我确信 json 是有效的。如下所示，

"data": [
{
  "first_name": "Airi",
  "last_name": "Satou",
  "position": "Accountant",
  "office": "Tokyo",
  "start_date": "28th Nov 08",
  "salary": "$162,700"
},
{
  "first_name": "Angelica",
  "last_name": "Ramos",
  "position": "Chief Executive Officer (CEO)",
  "office": "London",
  "start_date": "9th Oct 09",
  "salary": "$1,200,000"
}

]

有时，它可能只包含“first_name”和“last_name”。

我搜索了很长时间，所有样本都指定了'aoColumnsDef'或'aoColumns'。但我不知道确切的文件。有没有办法使用json中的字段名作为表头，字段值作为表体来填充jquery数据表？例如，json数据只包含'first_name'和'last_name'两个字段，表应该包含'first_name'和'last_name'两列。如果 json 包含 3 个字段，则表应显示 3 列。我确定“数据”中的所有项目都具有相同的字段。

提前致谢！

【问题讨论】：

我了解到您不知道您将在数据数组中接收什么样的对象，但数组中的所有对象都会相等？
@josedefreitasc 是的！

标签： javascript jquery json jquery-plugins datatables

【解决方案1】：

使用您的示例数据，循环第一条记录作为您的“示例”数据，然后像这样动态创建列定义：

编辑：使用 xhr 调用检索数据的原始代码示例

$(document).ready(function() {
  
  //callback function that configures and initializes DataTables
  function renderTable(xhrdata) {
    var cols = [];

    var exampleRecord = xhrdata[0];

    var keys = Object.keys(exampleRecord);

    keys.forEach(function(k) {
      cols.push({
        title: k,
        data: k
          //optionally do some type detection here for render function
      });
    });

    var table = $('#example').DataTable({
      columns: cols
    });

    table.rows.add(xhrdata).draw();
  }

  //xhr call to retrieve data
  var xhrcall = $.ajax('/path/to/data');

  //promise syntax to render after xhr completes
  xhrcall.done(renderTable);
});

var data = [{
  "first_name": "Airi",
  "last_name": "Satou",
  "position": "Accountant",
  "office": "Tokyo",
  "start_date": "28th Nov 08",
  "salary": "$162,700"
},
{
  "first_name": "Angelica",
  "last_name": "Ramos",
  "position": "Chief Executive Officer (CEO)",
  "office": "London",
  "start_date": "9th Oct 09",
  "salary": "$1,200,000"
}];

$(document).ready( function () {
  var cols = [];
  
  var exampleRecord = data[0];
  
  //get keys in object. This will only work if your statement remains true that all objects have identical keys
  var keys = Object.keys(exampleRecord);
  
  //for each key, add a column definition
  keys.forEach(function(k) {
    cols.push({
      title: k,
      data: k
      //optionally do some type detection here for render function
    });
  });
  
  //initialize DataTables
  var table = $('#example').DataTable({
    columns: cols
  });
  
  //add data and draw
  table.rows.add(data).draw();
});

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}


div.container {
  min-width: 980px;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display" width="100%">
      </table>
    </div>
  </body>
</html>

【讨论】：

非常感谢您的友好回答！我是 jquery 的新手，如果我通过 ajax 从服务器检索数据，如何，如何处理？我研究了许多 jquery 数据表的样本，ajax 代码应该在 DataTable() 方法中，例如：table.DataTable(){ serverSide: true, ajax: 'url' }
鉴于您事先不知道架构，您最好使用普通的 xhr 调用来检索您的数据，并且仅在 xhr 完成后调用 DataTables。将用一个例子来更新答案
谢谢！ xhrdata[0] 返回我 '['
听起来你正在返回一个字符串，而不是有效的 JSON。或者至少，内容类型的标头是错误的。
有没有办法处理json字符串？

【解决方案2】：

如何先从收到的 JSON 构建一个简单的 html 表，然后再使用创建的表构建 DataTable。

var table = $("#tableId");
table.append('<thead>....</thead>');
table.append('<tbody>....</tbody>');

table.DataTable();

【讨论】：

虽然你的答案指向了正确的方向，但retrieve选项在这里毫无意义。
是的，但如果您将使用异步调用重新加载表，则需要它。无论如何，我现在将其删除。谢了！
你的意思是在检索到json之后，通过构建html字符串动态创建html表，然后将其转换为jquery数据表？
是的，datatable 插件只会包装现有的表并扩展它的功能。