需求
每次打开表格,表格的列应该是不固定的,也就是字段数量和字段值是不固定的
动态列具体实现:
// 表列表
function load_object_info() {
var columns=[
{title:"编号"},
{title:"来源"},
{title:"客户名称"},
{title:"故障主题"},
]
var dataSet=[
['20180703001','监控发现','云惠','事件单加载异常'],
['20180703002','故障申报','新世纪','待办未刷新'],
['20180703003','故障申报','新世纪','待办未刷新'],
]
$('#list_Info').DataTable({
data: dataSet,
columns: columns
});
}
效果
只需要后台将指定json格式字符串(格式必须一模一样)传递给前台的data和columns即可,具体实现自己写就行了。
注意的是,你们后台的json字符串,可能需要转换才能真正符合标准,不仅仅是格式对就行了。
tempTitle=eval('('+data.title+')'); //标题头转换成为数组
tempData=eval('('+data.dataInfo+')'); //数据信息转换成为数组
*************************
$('#list_Info').DataTable({
data: tempData,
columns: tempTitle
});
************************
一定会遇到的问题
动态列完成,但是表格却提示字段数量不匹配?
系统在生成表格的时候,会用datatables进行加载,第一次进行加载时候,会正常加载,但是第二次不同列的时候,会进行报错Uncaught TypeError: Cannot read property ‘style’ of undefined。
原因
你加载完成后,没有进行销毁,导致每一次的用的是相同的数据列,去加载同的数据,例如表A有5个字段,你能打开,表B有10个字段,此时没有进行销毁再重建,那么会提示字段不匹配报错。
//前台报错信息
Uncaught TypeError: Cannot read property 'style' of undefined
解决方案:
加载前进行销毁
之前参考网上说明,利用datatables 自带的
$('#data_list').DataTable({
destroy: true,//是否重建
试过之后不可用,原因是因为,这个重建,是指对相同数据列进行重建,例如一张表你打开N次,但是里面数据可能会不同的,你使用这个进行重建没有问题。
正确重建步骤:
1.创建一个datatables,并为其设置名称。
2.进行销毁,将这个datatables进行销毁。
3.进行数据清空。
//------------由于列不固定,那么加载两次不同列字段如果不进行销毁dataTables的话就会提示column不对称,
// 这里就创建了一个table,然后再销毁----------------
var table= $('#data_list').DataTable({
data: [{title:"任意数据"}],
columns: [['任意数据']]
});
table.destroy();
$('#data_list').empty();
//--------------------------------
然后下面的你就正常写你自己的动态列实现就完成了,参考上面的写法就不会有报错信息了。
喜欢的点个赞,加下关注,评论内容博主会及时回复。
参考来源:https://www.cnblogs.com/tony-brook/p/9660982.html
参考来源:http://www.datatables.club/reference/api/destroy().html
参考来源:https://blog.csdn.net/weixin_40408338/article/details/80900614