1. 程式人生 > >DataTable 自定義返回型別

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;
}