datatable动态列处理,重绘表格
前言:至于动态列的绘画,我前面博客已经写过了,就是动态列的配置问题,不懂的去我博客看下,今天要写的呢,就是你已经写了一个动态列在datatable,现在你想重新绘制一遍这个表格,而且也是动态列的,里面有很多细节需要注意。
首先,说一下动态列的配置,就是要在datatable配置下修改columns和data,代码如下。
aaa.datatable = $('#aaa' 'language' "dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">' "paging": "lengthChange": "info": 'destroy': "deferRender": 'columns': 'data': })
culumns里的this.data.col_define列定义是后台返回的data数据下有个col_define列表,列表下放着targets(列,从0开始),data(对应data下的键key),title(列名或者叫做列标题),
data里的this.data.rowdata行数据定义是后台返回的data数据下有个rowdata列表,列表下放着每一行的键值对数据,每行用字典封装。其他的都是datatable的基本配置,想要修改成想要的其他控件可以看官网修改。
然后,就是绘制完表格怎么清表格了,搜索了官网和很多其他博客,大概思路就是用destroy,clear,empty。
这里要分别解释三个功能,第一是destroy()方法,是破坏整个表格结构,clear是清除放入的数据,需要注意的是,有人会问只用destroy不行吗,当然不行啊,因为之前列定义和行数据的放入,里面已经有数据了,你destroy只是清除了表格的结构,数据还在的,所以就会导致你的数据并没有真正清除完,还有就是empty方法,这个是用来清空datable的,这个清空,和前面两种不用,这个是清楚整个div的,所以用法也不一样,在这里我就饶了半天弯路,后面封装对象起来就容易很多了
记住,destroy和clear是datatable清除的,empty是div清除的.
举个例子:
table1=$('#aaa' int_table1=$('#aaa'
那么,接下来就是,把这些清除表格的方法封装到render函数即可。
这里需要提醒的是,把empty给拿出来,到时候具体重绘的时候再指定div去清除。还有这里的table,指的就是上面说的某div的datatable()。
结合起来,你需要封装的对象就出来了。
.data =.table=) {
.table=.DataTable({
'language'"dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">'"paging": "lengthChange": "info": 'destroy': "deferRender": 'columns': 'data':
这里你会发现,我把这里的table1给标红了,为什么呢,因为我在这里摔惨了2333333.这里的table1指的就是前面提到的$('aaa'),所以不要多次一举的把table1.Datatable写成$(table1).Datatable。能做到这里,已经说明你的思路已经非常完善了,说明你已经成功了一半,下面就是AJAX的数据交互。
=$('#aaa'=$('#aaa'= Object();
'POST''/url''json' ('ok' === res['code');
.empty();
console.log();
obj.data = res['data''失败' + res['msg'
},error: </span><span style="color: #0000ff">function</span><span style="color: #000000"> (jqXHR,textStatus,errorThrown) {
</span><span style="color: #0000ff">var</span> e =<span style="color: #000000"> JSON.parse(jqXHR.responseText);
console.log(</span>'失败'+e['msg'<span style="color: #000000">]);
}
});</span></pre>
当然,能够完成到这里,你已经很厉害了,因为你可以自定义列,然后重绘,再自定义列,封装起来的函数以后也可以接着用。
但是,我就算完成到了这一步,我在另一个地方重绘表格的地方,居然还是报错了,找了很久,反复校对了很多遍,终于给我找到错误了,就是一开始那个datatable我没有初始化,导致我清除和赋值的时候出现了问题。
所以,大家在用datatable的时候,一定要记得初始化表格。
$('#aaa').Datatable(opts);
opts里面的配置正常写就行,反正是初始化的,到时候你重绘表格的时候就会清除掉这个初始化表格。(重绘表头和行的就讲到这里了,不懂可以在下方提问,思路应该挺清晰的了)
一个TIP,如果你只是重绘数据,表头不换,那么你就可以用到下面这个render函数,这也是我一开始接触的只清除数据不清除表头的方法。
currentPage =