今天使用DataTables插件中遇到一个问题，需要再次请求接口时获取到后台接口返回的自定义属性，查看官网api和网上资料发现DataTables中ajax.dataSrc的过滤属性。

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

 

注意

需要注意的是dataSrc最后必须要return你表格需要的数据项;可以在return前面进行自定义属性的操作。