DataTable 只加载一次的问题

来源：互联网发布：vue服务端渲染 php 编辑：程序博客网时间：2024/05/22 14:31

一个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();

阅读全文

0 0