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或者為空，那麼，恭喜你，你找到錯誤了，離成功也就不遠啦。

（前端實習的臨近一個月，加油繼續肝，最近的梗，是（"盤"給我），我也覺得怪怪的，最近喜歡的歌，（小了白了兔，錘子之歌），都很魔性，哈哈哈哈哈哈哈哈哈哈哈哈哈嗝！）