datatables-cn
datatables-cn copied to clipboard
html写出来的table和js更新后的效果不一样(数据一样)
<table id="permission2" class="table table-bordered membersTable">
<thead></thead>
<tbody>
<tr>
<td>name</td>
<td style="padding:2px;"><div class="check"><span><input type="checkbox" class="input_check" name="objectId[]" id="{{ item.value_view }}" value="{{ item.value_view }}" {{ item.value_view_checked }} onClick="onUserCheck()"><label for="{{ item.value_view }}" style="margin-bottom: 0px;"/></span></div></td>
</tr>
</tbody>
</table>
$('#permission1').DataTable({
"language": dataTablesLanguage,
serverSide: true,
stateSave: false,
stateDuration: 0,
"filter": false,
'paging':false,
'info':false,
'infoEmpty':false,
'zeroRecords':false,
"sortable": false,
ordering: false,
ajax: {
type:"GET",
url:"{{ urlFor('group.permissions')}}".replace(":id", data.node.id),
dataType : "json",
"data": function (d) {
$.extend(d, {num:1});
$.extend(d, {editGroupId:$('#editUserGroupId').val()});
}
},
"columns": [
{"data": "name"},
{
"data": "value_view",
"sortable": false,
"render": function (data, type, full, meta) {
//console.log("data = " + JSON.stringify(full));
var isCheck = full['value_view_checked'];
$("#42_view").click(function () {
needshowsplicing();
});
return '<div class="check"><span><input type="checkbox" class="input_check"' +isCheck+ ' name="objectId[]" id="'+data+'" value="' +data+ '" onClick="onUserCheck()"><label for="'+data+'" style="margin-bottom: 0px"/></span></div>';
//console.log("u = " + '<thead></thead><tbody><tr><td>'+name+'</td><td style="padding:2px;height:22px"><div class="check"><span><input type="checkbox" class="input_check"' +isCheck+ ' name="objectId[]" id="'+data+'" value="' +data+ '" onClick="onUserCheck()"><label for="'+data+'" style="margin-bottom: 0px"/></span></div></td></tr></tbody>');
//return '<td style="padding:2px;"><div class="check"><span><input type="checkbox" class="input_check"' +isCheck+ ' name="objectId[]" id="'+data+'" value="' +data+ '" onClick="onUserCheck()"><label for="'+data+'" style="margin-bottom: 0px"/></span></div></td>';
}
}
]
});
@weishengwen2 这里需要注意到,DT采用的是缓存数据,当获取到数据后,DT会缓存到内部变量里,如果有不同的类型(正交数据),会分别存到不同的内部变量,比如排序,搜索等。 所以如果你要做更新表格数据的操作,你需要使用DT提供的api来操作,这样数据才能保持一致,因为通过jQuery更新表格数据,他只是更新了html,而DT的内部数据没有更新,所以再去获取的时候就会出现数据不一致。 如何更新DT的数据,参考:
- http://datatables.club/reference/api/data()
- http://datatables.club/reference/api/cell().data()
- http://datatables.club/reference/api/column().data()
- http://datatables.club/reference/api/row().data()