datatables.min.js 重新绑定datatable的数据

Question

使用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": "尾页"
                        }
                    }
                });

Answer 1

经过不断的百度和尝试, 最后终于成功了. 使用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>");
            }
        });
    }