datatable動態列處理,重繪表格 前言:至於動態列的繪畫,我前面博客已經寫過了,就是動態列的配置問題,不懂的去我博客看下,今天要寫的呢,就是你已經寫了一個動態列在datatable,現在你想重新繪製一遍這個表格,而且也是動態列的,裡面有很多細節需要註意。 首先,說一下動態列的配置,就是要在da ...
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或者為空,那麼,恭喜你,你找到錯誤了,離成功也就不遠啦。
(前端實習的臨近一個月,加油繼續肝,最近的梗,是("盤"給我),我也覺得怪怪的,最近喜歡的歌,(小了白了兔,錘子之歌),都很魔性,哈哈哈哈哈哈哈哈哈哈哈哈哈嗝!)