DataTable 自定義返回型別
參考https://datatables.net/manual/ajax 官網:
DataTable預設型別
當設定DataTables的處理方式為伺服器端處理(server-side processing)時,對於伺服器返回的JSON格式,DataTables期望的型別(http://datatables.net/manual/server-side#Returned-data)為
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
[
"Angelica",
"Ramos",
"System Architect",
"London",
"9th Oct 09",
"$2,875"
],
[
"Ashton",
"Cox",
"Technical Author",
"San Francisco",
"12th Jan 09",
"$4,800"
],
...
]
}
這樣,返回的結果會自動填在表格中,並且會顯示總的數目資訊等.
自定義型別
但是,在我們的實際專案中,我們經常會封裝返回的型別.例如,在前後端的分離中,常常會設計一個統一的響應結構,一般類似於:
public class Response {
private static final String OK = "ok";
private static final String ERROR = "error";
private Meta meta;
private Object data;
public Response success() {
this.meta = new Meta(true, OK);
return this;
}
public Response success(Object data) {
this.meta = new Meta(true, OK);
this.data = data;
return this;
}
public Response failure() {
this.meta = new Meta(false, ERROR);
return this;
}
public Response failure(String message) {
this.meta = new Meta(false, message);
return this;
}
public Meta getMeta() {
return meta;
}
public Object getData() {
return data;
}
public class Meta {
private boolean success;
private String message;
public Meta(boolean success) {
this.success = success;
}
public Meta(boolean success, String message) {
this.success = success;
this.message = message;
}
public boolean isSuccess() {
return success;
}
public String getMessage() {
return message;
}
}
}
因此,當獲取到資料後,我們通常將資料設定到Response的data屬性中.這樣的返回格式為:
{
"meta":{"success":true, "message":"OK"},
"data":
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
[
"Angelica",
"Ramos",
"System Architect",
"London",
"9th Oct 09",
"$2,875"
],
[
"Ashton",
"Cox",
"Technical Author",
"San Francisco",
"12th Jan 09",
"$4,800"
],
...
]
}
}
問題
依據DataTables預設支援的JSON型別,發現我們只需要獲取對應JSON中的data屬性即可.因此,在DataTables的ajax屬性中,用dataSrc過濾返回給DataTables的資料,
var $table = $('table').DataTable(
{
...
"processing" : true,
"serverSide" : true,
"ajax" : {
data : function(d) {
return $.extend({}, d, {
'name' : $('#inInput').val()
})
},
dataSrc: function (json) {
return json.data;
},
url : "/path/url",
type : "POST"
}
}
);
但是,此時會發現,資料已經填到了表格中,但是沒有關於分頁的資訊. 即返回的資料結構中recordsTotal,recordsFiltered沒有起作用.
解決
其實,DataTables支援的資料結構中,屬性draw,recordsTotal,recordsFiltered必須為頂級屬性.而在dataSrc返回的結構中,draw,recordsTotal,recordsFiltered依然為子屬性.這樣,DataTables會找不到這些資訊.修改dataSrc的返回結果為:
dataSrc: function (json) {
json.draw = json.data.draw;
json.recordsTotal = json.data.recordsTotal;
json.recordsFiltered = json.data.recordsFiltered;
return json.data;
}