官网行折叠的例子:http://www.datatables.club/example/user_share/row_details.html
#-1> 初始版本:
<table>的初始结构放在<body>里,
通过ajax从后台Servlet取数据,根据某个下拉框查询刷新表格数据
每一次刷新会触发drawTable()函数
function drawTable(dataArray) {
var table = $('#example').DataTable({
"columnDefs": [
{
//第一列不可查询、不可排序
"searchable": false,
"orderable": false,
"targets": 0
},
{
//设置默认值
"defaultContent": "",
"targets": "_all"
}
],
"info": false,
"order": [[4, 'desc']],
"language": {
"zeroRecords": "抱歉,无数据,请重新查询!",
"lengthMenu": "每页显示_MENU_条",
"paginate": {
"next": "下一页",
"previous": "上一页"
},
"info": "总共_TOTAL_条数据,目前显示的是第_START_到_END_条",
"thousands": ","
},
"searching": false,
"destroy": true,
scrollX: false,
scrollY: '80vh',
scrollCollapse: true,
paging: false,
"data": dataArray.BodyData,
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{"data": "name"},
{"data": "district"},
{"data": "data1"},
{"data": "data2"}
]
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
}
返回行折叠内容的函数format(d),d 是行折叠要显示的内容
function format(d) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Full name:</td>' +
'<td>' + d.name+ '</td>' +
'</tr>' +
'<tr>' +
'<td>Extra info:</td>' +
'<td>And any further details here (images etc)...</td>' +
'</tr>' +
'</table>';
}
运行结果:
初始化加载的时候没有问题,点开再关闭都是正确的
第二次ajax刷新加载完毕、第三次刷新加载完毕......第N次加载完毕的时候,再点击展开跟折叠的时候,突然出现了以下报错:
而且同一页面还出现,第一行可以点开,第二行、第三行点不开的情况:
对每一行点击事件输出当前行内容,data1、data2、data3分别是第一次ajax刷新、第二次、第三次刷新后点击的结果
从图中可以看到虽然表格重新刷新了,但是前面ajax刷新的数据没有清掉。
#-2> 初始解决思路:
每次drawtable之前,把table数据全部清空,但是希望保留表结构
var table = $('#example').DataTable();
table.clear().draw();
参考:
http://datatables.club/reference/api/clear().html
https://www.cnblogs.com/xiashengwang/p/4182494.html
运行结果:初始化加载的时候没有问题,到第二次ajax刷新就开始报错,并且没有任何行数据的输出
#-3> 正确的解决办法:remove
在重绘table之前删除已有表格,加上以下语句: $("div#example_wrapper").remove(); 完美解决!!
function drawTable(dataArray) {
//首先删除已有表格
$("div#example_wrapper").remove();
// 表格框架
var tableFrame = "<table id=\"example\" class=\"cell-border compact stripe\" style=\"width:100%\">\n" + 【tableFrame】+"</table>";
//重新生成的表头添加到<body>中
$("body").append(tableFrame);
var table = $('#example').DataTable({
//和上面一致
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
}