如何将动态JSON加载到jQuery数据表中

Question

如何将动态JSON加载到jQuery数据表中

javascriptjqueryjsonjquery-pluginsdatatables

8

我希望将动态数据加载到我的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 datatable？例如，json数据仅包含两个字段，“first_name”和“last_name”，则表格应包含两列“first_name”和“last_name”。如果json包含3个字段，则表格应显示3列。我确信“data”中的所有项目都具有相同的字段。

提前致谢！

- Allen4Tech

我理解您不知道在数据数组中会收到什么类型的对象，但是数组中的所有对象都是相等的吗？ - josedefreitasc

@josedefreitasc 是的！ - Allen4Tech

2个回答

1

先从接收到的JSON数据构建一个简单的HTML表格，然后再使用创建的表格构建DataTable。

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

table.DataTable();

- Sargon

尽管您的答案指向了正确的方向，但在这里使用“retrieve”选项是没有意义的。 - Gyrocode.com

是的，但如果您将使用异步调用重新加载表格，则需要它。无论如何，我现在会将其删除。谢谢！ - Sargon

你的意思是在获取JSON数据后，通过构建HTML字符串动态创建HTML表格，然后将其转换为jQuery DataTable吗？ - Allen4Tech

是的，datatable插件只会包装现有的表格并扩展其功能。 - Sargon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BLSully · Accepted Answer

使用您的示例数据，循环处理第一条记录作为您的“示例”数据，然后动态创建列定义，如下所示：

编辑：原始代码示例，包括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>