DataTable 只加载一次的问题

一个Bootstrap模态框里嵌了一个 Table,用dataTable来加载数据

Table

 <!--标签条目List-->
    <div class="modal fade LabelItemListModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabe6"
         style="display: none">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button"  class="close" data-dismiss="modal"
                            aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabe6">标签条目列表</h4>
                </div>
                <div class="modal-body">
                    <div class="alltitle">标签条目</div>
                    <div class="edit_btn edit_btn02" title=""><a id="labelItemAddButton" class="btn btn-primary" href="#" data-toggle="modal" ><i class="fa fa-plus"></i>新增条目</a></div>
                    <table id="labelItemList"  class="display"  width="100%" border="0" cellspacing="0" cellpadding="0">
                        <thead>
                        <tr>
                            <th> <input type="checkbox" name="labelItem_list_all" /></th>
                            <th>条目名称</th>
                            <th>条目编码</th>
                            <th>是否有效</th>
                            <th>默认排序</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="modal-footer" >
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="editFinish()">完成</button>
                </div>
            </div>
        </div>
    </div>

请求

/*回显标签条目信息*/
function LabelIteminfo(labelId) {
     $("#labelItemList").dataTable(
        {
            language: storeUtils.languageSetting,
            "sDom": 't<"bottom"i><"mystyle"l>p',
            "retrieve": true,
            "bProcessing" : true,
            "destroy": true,//解决cannot reinitialise dataTable
            "processing": true,
            "serverSide": true,
            "searching": false, //禁用原生搜索
            "orderMulti": false, //启用多列排序
            "order": [], //取消默认排序查询,否则复选框一列会出现小箭头
            "renderer": "bootstrap", //渲染样式:Bootstrap和jquery-ui
            "pagingType": "simple_numbers", //分页样式:simple,simple_numbers,full,full_numbers
            scrollX: true,
            scrollCollapse: true,
            ajax: function (data, callback, settings) {
                //封装请求参数
                var param = {};
                param.pageSize = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
                param.start = data.start;//开始的记录序号
                param.startPage = (data.start / data.length) + 1;//当前页码
                param.labelId = labelId;
                console.info("》》》》》》》发送标签条目表单请求");
                core.foreseeAjax({
                    "serviceName": system.getStoreServiceName(),
                    "type": "default",
                    "param": param,
                    "url": storeCus.data.url.labelAndGroupService,
                    "method": "queryLabelItemByLabelId",
                    "callback": function (result) {
                        setTimeout(function () {
                            var pageInfo = result.body.data;
                            var page = result.body.pager;
                            //封装返回数据
                            var returnData = {};
                            returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                            returnData.recordsTotal = page.recordCount;//返回数据全部记录
                            returnData.recordsFiltered = page.recordCount;//后台不实现过滤功能,每次查询均视作全部结果
                            returnData.data = pageInfo;//返回的数据列表
                            //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
                            //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
                            callback(returnData);
                        }, 200);
                    }
                });
            }, //设置定义列的初始属性
            "columnDefs": [
                {
                    "targets": -1,//编辑
                    "data": null,
                    "orderable": false,
                    "render": function (data, type, row, meta) {
                        return "<a href='javascript:void(0)' class='sbtn btn03' dataId='" + data.labelItemId + "' id='labelItem_list_edit'>修改</a>"
                    }

                },
                {
                    "targets": 0,// 编辑
                    "data": null,
                    "orderable": false,
                    "bSortable": false,
                    "render": function (data, type, row, meta) {
                        return '<input type="checkbox" dataId=' + data + ' class="idCheckbox"  id="table_list_checkbox" />';
                    }
                }

            ],
            //列表表头字段
            columns: [
                {"data": "labelItemId"},//第一列隐藏
                {"data": "itemName", "sDefaultContent": ""},
                {"data": "itemCode", "sDefaultContent": ""},
                {
                    "data": "isValid",
                    "sDefaultContent": "",
                    "render": function (data) {
                        if (data == "Y") {
                            return "有效";
                        } else if (data == "N") {
                            return "无效";
                        }

                    }
                },
                {"data": "sort", "sDefaultContent": ""},
                {"data": "remark", "sDefaultContent": ""},
                {"data": null}

            ]
        });
}

问题

第一次请求 LabelIteminfo(labelId)函数能执行,第二次总不能执行。

解决方法

每次执行请求前,清空还原Table。

var  labelItemListDataTable =$("#labelItemList").dataTable();
     labelItemListDataTable.fnClearTable();
     labelItemListDataTable.fnDestroy();

猜你喜欢

转载自blog.csdn.net/peng_hong_fu/article/details/77413940