舞动青春zht
2017-03-16 06:55
采纳率: 77.8%
浏览 6.0k

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": "尾页"
                        }
                    }
                });
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 舞动青春zht 2017-03-18 00:45
    已采纳

    经过不断的百度和尝试, 最后终于成功了. 使用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>");
                }
            });
        }
    
    打赏 评论
  • 夕阳雨晴 2017-03-16 07:44

    在数据修改之后,调用此函数对datatable的数据进行重绘,$('.table').DataTable().draw();

    打赏 评论
  • 舞动青春zht 2017-03-28 05:09

    上面的最佳答案还是有一点问题, 当第一次查询的数据为空的时候, 会报错: Cannot read property 'nodeName' of undefined. 原因是数据清除和重新绑定位置放置不正确, 最终调整把数据清除放到 success 开始第一句执行, 把重新绑定放到 if 中最后执行, 这样暂时没有发现其他问题了.

    打赏 评论

相关推荐 更多相似问题