這篇文章記錄一些datatables常用的回調函數
rowCallback：表格行繪製的回調函數
rowCallback: (row, data, index) => {}參數row表示這一行的dom，data表示這一行的全部數據，index表示這一行的內部索引。另外還有一個相似的回調函數createdRow，參數也是一樣的，官網上說createdRow的效率高於rowCallback，實踐中也沒有比較過，不過createdRow會先於rowCallback觸發。
initComplete：表格初始化結束後的回調函數。有兩個參數，一個是setting，datatables的設置對象；一個是json，如果使用ajax選項來獲取數據，則得到服務器返回的數據，否則是 undefined
一般常用的回調函數就這幾個，很少，還有很多跟保存表格狀態有關的回調函數，大家可以直接去datatables官網查詢，雖然是jquery版本的，但是原理都是一樣的。
在angular中還有一點是需要注意的，那就是angular對於dom只渲染一次，如果之後改變了dom的結構，比如添加了新的click事件，那麼angular將不會作出反應，例如在columns.render中設置：
render: (data, type, row, meta) => {
return '<div><button (click)="test()">通過</button>'
}
這樣即使在組件中定義了test這個函數，點擊按鈕也不會觸發。在angularjs中可以使用$compile服務來對dom重新編譯以解決這個問題，但是在angular5中我沒有找到類似的用法，好像並不提倡這種寫法。目前我是使用rowCallback+jquery的方法來解決這個問題。例如：
render: (data, type, row, meta) => {
if (row.state == 0) {
return '<div>' +
'<button class="agreeBtn btn btn-sm btn-raised btn-blue">通過</button>' +
'<button class="refuseBtn btn btn-sm btn-raised btn-red">拒絕</button>' +
'</div>';
}
else {
return '未通過審覈'
}
}rowCallback: (row, data, index) => {//每一行創建完成之後的回調函數
let self = this;
self.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {//用於獲取datatable的實例
//對審覈通過和拒絕button綁定相應的事件
if ($('.agreeBtn', row).length > 0) {
$('.agreeBtn', row).unbind('click');
$('.agreeBtn', row).bind('click', () => {
self.systemService.updateUserState(data.id, 1).subscribe(result => {
if (result) {
alertFunctions.basicSuccess('成功', '用戶' + data.name + '審覈通過');
dtInstance.row(row).remove();
dtInstance.draw();
self.ifAudited = true;
}
else {
alertFunctions.basicError('失敗', '用戶' + data.name + '審覈失敗');
}
})
})
$('.refuseBtn', row).unbind('click');
$('.refuseBtn', row).bind('click', () => {
self.systemService.updateUserState(data.id, -1).subscribe(result => {
if (result) {
$('.auditTd', row).html('未通過審覈');
data.state = -1;
dtInstance.draw()
}
else {
alertFunctions.basicError('失敗', '拒絕通過審覈失敗');
}
})
})
}
})
)
代碼裏面的dtElement是通過
@ViewChild(DataTableDirective) dtElement: DataTableDirective;self.dtElement.dtInstance.then((dtInstance: DataTables.Api)=>{})
就可以獲得datatables的實例。
下面再記錄一下ajax這個屬性：
ajax用於異步獲取數據填充到表格中。數據源可以是兩種類型：對象數組和純數組。當你使用對象數組作爲數據源時，你需要使用 columns.data來匹對對象的屬性，例如：
{
"data": [
{ "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" },
// row 2 data source,
// etc
]
} 那麼就需要做如下設置：
"columns": [
{"data": "name"},
{"data": "position"},
{"data": "salary"},
{"data": "start_date"},
{"data": "office"},
{"data": "extn"}
]如果使用的是純數組則不需要使用，DataTables 會默認按照數組的順序顯示每一個行數據。還有一點需要注意的是，datatables默認接受一個屬性爲data的數據，如果你返回的數據不是這樣，你需要使用 ajax.dataSrc來處理，我們稍後再來說這個屬性。
ajax接受3種類型的參數：
string- 設置獲取數據的urlobject- 和 jQuery.ajax 定義類似function- 自定義獲取數據的功能
當參數是object時，記錄一下與jquery.ajax不一樣的地方。
在datatables中，ajax.data可以是object，也可以是function。當爲object時與jquery.ajax一樣，當爲function時，函數有一個參數data，官網對這個參數的解釋爲：Datatables構造的請求參數，如果開啓了服務器模式( serverSide:true) 這個還會包含服務器請求的一些參數，具體到底是什麼目前我也不是很清楚，以後搞清楚了會第一時間更新。當函數沒有返回值時，這個data參數就會作爲request發送的數據；如果返回一個對象，那麼這個對象就會作爲request發送的數據；如果返回一個字符串，一般是用JSON.stringify()來獲取，服務端可以直接解譯。
datatables的ajax有一個新的屬性叫dataSrc，它可以改變從服務器端返回的數據給datatables，或者是操作數據從一種形式轉換成另一種形式，添加這個參數的目的是因爲success函數在datatables的ajax中是不能重寫的，它是自動調用的。dataSrc可以是string也可以是function。
當爲string時，之前我們說過，datatables默認接受的是一個屬性爲data的數據（對象數組或者純數組），dataSrc就可以改變這個屬性名字，例如設置"dataSrc": "tableData"，那麼datatables就會去尋找屬性爲"tableData"的數據，如果設置"dataSrc": ""，datatables就會從數組裏獲取數據（比如： { [ ...data... ] } ）。
當爲function時，dataSrc 可以操作從服務器返回的數據轉化成另一種。 例如， 如果數據被分隔在多個數組裏面，你需要合併到一個數組返回給Datatables處理後顯示非json格式的數據，可以通過 dataSrc來轉換成javascript數組交給Datatables顯示 ，接受一個data參數，返回一個datatables使用的數據數組。
ajax還可以接受一個function參數，function ajax( data, callback, settings )。作爲一個函數，這個可以完全自己控制Ajax請求，請求參數，返回的數據都可以不受 DataTables 的影響。事實上你可以使用非Ajax請求，而直接使用本地儲存。你可以直接從本地數據庫獲取數據交給 callback 去處理。參數data是發送給服務器的數據，callback是回調函數，必須被執行，DataTables才能獲取到數據，且將返回的數據作爲callback()的唯一參數。例如：
"ajax": function (data, callback, settings) {
callback(
JSON.parse( localStorage.getItem('dataTablesData') )
);
}