datatables.min.js 重新绑定datatable的数据
问题描述：
使用datatables.min.js进行table的分页, 筛选后重新从后台查询数据修改table信息, 但是datatable的绑定信息没有被修改, 还是第一次的table内容, 网上找的"bDestroy": true,也没有效果, 请各位大神帮忙看看. 谢谢!
function GetList()
{
var UserName = $("#txt_keyword").val();
var selectId = $("#AccountSelect").val();
$.ajax({
type: "POST",
url: "/Backstage/SystemManage/GetUserForAjax",
data: { UserName: UserName, selectId: selectId },
success: function (result) {
html = "";
if (selectId != -1) {
//$('.table').dataTable().fnClearTable(); //将数据清除
}
if (result.State == 0 && result.Data.length > 0) {
for (var i = 0; i < result.Data.length; i++) {
html += "<tr>";
html += "<td><input type=\"checkbox\" value=\"" + result.Data[i].Id + "\" class=\"i-checks\" name=\"input[]\"></td>";
html += "<td><small>" + result.Data[i].Account + "</small></td>";
html += "<td><small>" + result.Data[i].RealName + " </small></td>";
html += "</tr>";
}
}
$("#tbodyDept").html(html);
//$('.table').dataTable().fnRecordsDisplay();
//$(".table").dataTable().fnDraw();
var table = $('.table').dataTable({
"bFilter": false, //过滤功能
"bDestroy": true,
"bSort": false, //排序功能
"bLengthChange": false, //改变每页显示数据数量
//"bDeferRender": true,
"bPaginate": true, //开启分页功能，如果不开启，将会全部显示
"bProcessing": true,
//"bInfo": true,
"iDisplayLength": 5,
"oLanguage": {
"sZeroRecords": "没有找到符合条件的数据",
"sProcessing": "<img src=’./Content/InspiniaAdmin/css/plugins/blueimp/img/loading.gif’ />",
"sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
"sInfoEmpty": "没有记录",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
}
});
答
经过不断的百度和尝试, 最后终于成功了. 使用fnClearTable() 和fnAddData(tableData)方法重新绑定显示
代码如下:
function GetList() {
var UserName = $("#txt_keyword").val();
var selectId = $("#AccountSelect").val();
$.ajax({
type: "POST",
url: "/Backstage/SystemManage/GetUserForAjax",
data: { UserName: UserName, selectId: selectId },
success: function (result) {
if (result.State == 0 && result.Data.length > 0) {
var tableData = new Array(result.Data.length);
for (var i = 0; i < result.Data.length; i++) {
arrary = new Array(9);
arrary[0] = "<input type=\"checkbox\" value=\"" + result.Data[i].Id + "\" class=\"i-checks\" name=\"input[]\">";
arrary[1] = "<small>" + result.Data[i].Account + "</small>";
arrary[2] = "<small>" + result.Data[i].RealName + " </small>";
if (result.Data[i].Gender == 1) {
arrary[3] = "<small>男 </small>";
} else if (result.Data[i].Gender == 2) {
arrary[3] = "<small>女 </small>"
} else {
arrary[3] = "<small>未知 </small>"
}
arrary[4] = result.Data[i].NickName;
if (result.Data[i].Source == 1) {
arrary[5] = "APP用户";
} else {
arrary[5] = "后台账号";
}
if (result.Data[i].MobilePhone != "" && result.Data[i].MobilePhone != null) {
arrary[6] = result.Data[i].MobilePhone;
} else {
arrary[6] = "<small></small>";
}
if (result.Data[i].DeleteMark == true) {
arrary[7] = "<i class=\"fa fa-check text-navy\"></i>";
} else {
arrary[7] = "<i class=\"fa fa-times text-danger\"></i>";
}
if (result.Data[i].EnabledMark == true) {
arrary[8] = "<i class=\"fa fa-check text-navy\"></i>";
} else {
arrary[8] = "<i class=\"fa fa-times text-danger\"></i>";
}
tableData[i] = arrary;
$('.table').dataTable().fnClearTable(); //将数据清除
$('.table').dataTable().fnAddData(tableData); //重新绑定table数据
$('.table').dataTable({
"bFilter": false, //过滤功能
"bDestroy": true,
"bSort": false, //排序功能
"bLengthChange": false, //改变每页显示数据数量
"bPaginate": true, //开启分页功能，如果不开启，将会全部显示
"bProcessing": true,
"iDisplayLength": 2,
"oLanguage": {
"sZeroRecords": "没有找到符合条件的数据",
"sProcessing": "稍后...",
"sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
"sInfoEmpty": "没有记录",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
}
});
},
error: function () {
$("#tbodyDept").html("<tr><td colspan=\"10\"><small class=\"text-warning\">查询数据出现错误!</small></td></tr>");
}
});
}
答
在数据修改之后，调用此函数对datatable的数据进行重绘，$('.table').DataTable().draw();
答
上面的最佳答案还是有一点问题, 当第一次查询的数据为空的时候, 会报错: Cannot read property 'nodeName' of undefined. 原因是数据清除和重新绑定位置放置不正确, 最终调整把数据清除放到 success 开始第一句执行, 把重新绑定放到 if 中最后执行, 这样暂时没有发现其他问题了.