alert弹框里弹一个表格_jQuery的datatable动态列处理，轻松重绘表格

前言：至于动态列的绘画，就是动态列的配置问题，今天要写的呢，就是你已经写了一个动态列在datatable，现在你想重新绘制一遍这个表格，而且也是动态列的，里面有很多细节需要注意，首先，说一下动态列的配置，就是要在datatable配置下修改columns和data，代码如下：

 1 var aaa.datatable = $('#aaa').DataTable({ 2 'language': lan, 3 "dom": 'lBrt', 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": 'lBrt', "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(); }}

这里你会发现，因为我在这里摔惨了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或者为空，那么，恭喜你，你找到错误了，离成功也就不远啦。