如何将动态json加载到jquery数据表
Posted
技术标签:
【中文标题】如何将动态json加载到jquery数据表【英文标题】：how to load dynamic json to jquery datatable 【发布时间】：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 是的！ 【参考方案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" >
</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 插件只会包装现有的表并扩展它的功能。以上是关于如何将动态json加载到jquery数据表的主要内容，如果未能解决你的问题，请参考以下文章
jquery mobile listview使用ajax动态加载后,跳转到其他页面返回时数据没有保存如何解决?
关于jquery easyui的datagrid组件,如何动态加载表头及其数据
jquery easyui 的 datagrid如何动态加载数据?