datatable动态列处理，重绘表格
前言：至于动态列的绘画，我前面博客已经写过了，就是动态列的配置问题，不懂的去我博客看下，今天要写的呢，就是你已经写了一个动态列在datatable，现在你想重新绘制一遍这个表格，而且也是动态列的，里面有很多细节需要注意。
首先，说一下动态列的配置，就是要在datatable配置下修改columns和data，代码如下。
- 1 var aaa.datatable = $('#aaa').DataTable({
- 2 'language': lan,
- 3 "dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">',
- 4 "paging": true,
- 5 "lengthChange": true,
- 6 "info": true,
- 7 'destroy': true,
- 8 "deferRender": true,
- 9 'columns': this.data.col_define,
- 10 'data': this.data.rowdata,
- 11 })
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清除的.
举个例子：
- var table1=$('#aaa');
- var int_table1=$('#aaa').Datatable();
- int_table1.destroy();
- int_table1.clear();
- table1.empty();
那么，接下来就是，把这些清除表格的方法封装到render函数即可。
- render(table) {
- table.clear();
- table.destroy();
- }
这里需要提醒的是，把empty给拿出来，到时候具体重绘的时候再指定div去清除。还有这里的table，指的就是上面说的某div的datatable()。
结合起来，你需要封装的对象就出来了。
- class Object {
- constructor(table) {
- this.data = {};
- this.table=table;
- }
- init(table1) {
- return this.table=table1.DataTable({
- 'language': lan,
- "dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">',
- "paging": true,
- "lengthChange": true,
- "info": true,
- 'destroy': true,
- "deferRender": true,
- 'columns': this.data.col_define,
- 'data': this.data.rowdata,
- })
- }
- render(table){
- table.clear();
- table.destroy();
- }
- }
这里你会发现，我把这里的table1给标红了，为什么呢，因为我在这里摔惨了2333333.这里的table1指的就是前面提到的$('aaa')，所以不要多次一举的把table1.Datatable写成$(table1).Datatable。能做到这里，已经说明你的思路已经非常完善了，说明你已经成功了一半，下面就是AJAX的数据交互。
对了，在AJAX之前，你要先声明好你的对象。
- table=$('#aaa');
- int_table=$('#aaa').Datatable();
- obj=new Object(table);
- $.ajax({
- type: 'POST',
- url: '/url',
- async: true,
- cache: false,
- data: {},
- dataType: 'json',
- beforeSend: function () {
- },
- success: function (res) {
- if ('ok' === res['code']) {
- obj.render(int_table);
- table.empty();
- console.log(table);
- obj.data = res['data'];
- obj.init(table);
- console.log(table);
- } else {
- alert('失败' + res['msg']);
- }
- },
- complete: function () {
- },
- error: function (jqXHR, textStatus, errorThrown) {
- var e = JSON.parse(jqXHR.responseText);
- console.log('失败'+e['msg']);
- }
- });
当然，能够完成到这里，你已经很厉害了，因为你可以自定义列，然后重绘，再自定义列，封装起来的函数以后也可以接着用。
但是，我就算完成到了这一步，我在另一个地方重绘表格的地方，居然还是报错了，找了很久，反复校对了很多遍，终于给我找到错误了，就是一开始那个datatable我没有初始化，导致我清除和赋值的时候出现了问题。
所以，大家在用datatable的时候，一定要记得初始化表格。
- $('#aaa').Datatable(opts);
opts里面的配置正常写就行，反正是初始化的，到时候你重绘表格的时候就会清除掉这个初始化表格。（重绘表头和行的就讲到这里了，不懂可以在下方提问，思路应该挺清晰的了）
这里我再附带一个TIP，如果你只是重绘数据，表头不换，那么你就可以用到下面这个render函数，这也是我一开始接触的只清除数据不清除表头的方法。
- render(table) {
- var currentPage = table.page();
- table.clear();
- table.rows.add(this.staff_list);
- table.page(currentPage).draw(false);
- }
这个用来更新数据就很爽了，或者你用window.location.reload来更新整个页面，重新获取后台的数据初始化表格来刷新页面。其他的单纯刷新datatable方法也有就是table.draw(false)。不过这个会默认翻到第一页，所以我这里才会还有一个table.page（）；
工作经验：前端报错一定不要着急，看控制台报的什么错，再看前后端数据交互是否传送了正确的数据，如果没错，那就硬肝前端的错吧，datatable出现的大多数错误都是行列没对准这些错误，其实有时候并不是后端的错，可能多数都是前端绘制表格的时候出错了，关键就是找清除你自己写的代码的每一步，必要时多console.log一下，看下是否每一步都是你想要的结果，偶尔会出现undefined或者为空，那么，恭喜你，你找到错误了，离成功也就不远啦。
（前端实习的临近一个月，加油继续肝，最近的梗，是（"盘"给我），我也觉得怪怪的，最近喜欢的歌，（小了白了兔，锤子之歌），都很魔性，哈哈哈哈哈哈哈哈哈哈哈哈哈嗝！）
经验首页