使用javascript动态更新表
我有一个页面,我向服务器发送ajax请求。 页面上有一个表格,显示一些数据。 服务器返回一个json对象,该对象是一个对象列表,它不包含该页面的任何布局。
我想通过返回的json更新表行 。 如何在不使用第三方库且仅使用jquery的情况下执行此操作? 我只想要一个粗略的想法和例子。
这是演示小提琴 。 (简单版)
新:查看更新的小提琴 (高级版)。
假设您已检索到此JSON数据:
var jsonData = [ { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' }, { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' }, { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' } ];
你有这张桌子:
There are no items...
现在,您需要一个可以按可自定义顺序和状态解析值的方法。 例如,如果您可以将字段数组传递给解析器函数; 您可以设置字段的顺序,如果您愿意,可以省略一两个字段:
loadTable('data-table', ['field1', 'field2', 'field3'], jsonData);
请注意,不解析field4
。
loadTable
函数循环遍历返回数组的项,并在
内创建一个
,每个字段值。 这是一个简单的function:
function loadTable(tableId, fields, data) { //$('#' + tableId).empty(); //not really necessary var rows = ''; $.each(data, function(index, item) { var row = ''; $.each(fields, function(index, field) { row += '' + item[field+''] + ' '; }); rows += row + ' '; }); $('#' + tableId).html(rows); }
更新:
增加了对支持:
- 表头
- 默认文本(用于空列表)
- 附加清单
- 清理桌子
- 等等…
您现在可以只包含一个空表, dynamicTable
将负责其余的dynamicTable
:
调用dynamicTable.config()
方法来配置表:
var dt = dynamicTable.config('data-table', //id of the table ['field2', 'field1', 'field3'], //field names ['header 1', 'header 2', 'header 3'], //set to null for field names to be used as header names instead of custom headers 'There are no items to list...'); //default text for no items
然后调用dt.load(data);
加载新数据(删除以前的列表,如果有的话),
或者调用dt.load(data, true);
将新数据附加到上一个列表的末尾。
调用dt.clear();
方法将清除整个列表。
这里更新了小提琴 。
您可以遍历JSON对象。
$.each(JSON_Object, function(key, value) { // Write your code here });
然后,您只需在表格中附加数据即可。
$('#yourTableName tr:last').after('John $500 ');
由于您特别提到您不需要第三方库,因此您可以执行上述操作。 但是,如果您需要具有所有function的数据集,您可以考虑一些插件,如http://datatables.net/ 。