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