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或者為空，那么，恭喜你，你找到錯誤了，離成功也就不遠啦。
（前端實習的臨近一個月，加油繼續肝，最近的梗，是（"盤"給我），我也覺得怪怪的，最近喜歡的歌，（小了白了兔，錘子之歌），都很魔性，哈哈哈哈哈哈哈哈哈哈哈哈哈嗝！）
