jquery datatable ajax配置详解

我写的这个东西类似于个人笔记，如果你想要完整的而了解

可以去这里看看http://dt.thxopen.com/

包括英文原网站都不错.

通过配置ajax的属性和服务器交互

$("selector").dataTable(

"processing":true,//显示“处理中...”

"serverSide":true,//开启服务器模式。

"data":[....],

"ajax":{.....}

);

首先明确：ajax负责数据传输部分，columns负责定义数据（怎么显示，怎么对应等）

data就是一个数据源。用column定于数据的对应关系后。从data里读取实际数据。

data可以是二维数组，或者是对象数组

例子：

$('#example').dataTable( {
    "data": [
        [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ],
        [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ],
        // ...
    ]
    //or...
  "data": [
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       5421
        },
        {
            "name": "Garrett Winters",
            "position": "Director",
            "salary": "5300",
            "start_date": "2011/07/25",
            "office": "Edinburgh",
            "extn": "8422"
        },
        // ...
    ],

} );

下面介绍正菜

ajax

他有三种用法：

1.是一个string类型

设置一个url对应一份远程的json文件。他期待返回一个叫“data”的数组。如果你通过dataSrc指定为对象，那他就要求返回一个对象数组。

例子

$('#example').dataTable( {
  "ajax": "data.json"
} );

2.是一个对象类型

形式如：

ajax：{
  url:"...",
  type:"post",
  //就是jquery.ajax那里面能设置什么他就能设置什么，其实原理也是把这个配置对象传给jquery.ajax那个函数执行。
  //除此 他还支持三个特有的参数
  data:"...",//设置发送给服务器的数据（名称、格式）
  dataSrc:"...",//这是从服务器接受的数据（名称、格式）
  success:'...'//回调函数。不要修改！DT会默认使用它。想改交互参数找前两项就行
}

这种方式最好用，详细介绍下那三个特殊参数：

2.1ajax.data

他实际上就是$.ajax.data的属性。DT有加了一些扩展

2.1.1如果是一个object

你可以附加一下参数，连同DT提交的参数一起传给服务器

例子：

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": {
        "user_id": 451
    }
  }
} );

2.1.2如果是一个function

这个function接受一个object，代表了DT内部传给服务器的data集合。

可以返回一个object。这个object可以是你修改后的在请求参数集合(DT不会将他内建的data集合和这个object合并)

也可以什么都不返回（即返回空）。这样DT会把默认的data集合传给服务器（也可以在方法体里把你定制的参数附加到data集合中，这样穿data集合的时候也把附加参数传回去了）

例子：

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
        d.extra_search = $('#extra').val();
    }
  }
} );
$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
      return $.extend( {}, d, {
        "extra_search": $('#extra').val()
      } );
    }
  }
} );

2.2ajax.dataSrc

处理从服务器返回来的请求集合

2.2.1如果是一个string

指定用于dt中tablebody的数据对象名字（如果返回来的不是一个对象，而是一个纯数组。那么这个地方设为""）

一般ajax返回来的请求，除了数据部分，还包括分页，排序等等其他信息

这里的string就是指数据部分对应的对象的名字。

例子：

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "dataSrc": "tableData"
  }
//假设传回的集合是{tableData:[{...},{...}],page:{...},...}
} );

2.2.2如果是一个function

他就受一个object代表了服务器发来的全部请求内容（不仅仅是data！）

返回一个array你定制完成以后，DT用来构造table的用的数据

例子：

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "dataSrc": function ( json ) {
      for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
        json.data[i][0] = '<a href="/message/'+json.data[i][0]+'>View message</a>';
      }
      return json.data;
    }
  }
} );

2.3sucess

请求成功以后DT默认做的事情在这个函数中，因为DT要使用这个做构建操作。所以不要覆盖他。如果想修改，可以通过dataSrc或者下面介绍的完全控制的方式，修改接入点。

3.如果ajax是一个function

那么你通过这个function可以完全控制ajax请求。

functionajax(data,callback,settings)

data-发送到服务器的参数

callback-回调函数服务器回传的集合应该传给这个回调函数，作为其参数

settings-DT的配置对象。

例子：

$('#example').dataTable( {
  "ajax": function (data, callback, settings) {
    callback(
      JSON.parse( localStorage.getItem('dataTablesData') )
    );
  }
} );

jquery datatable ajax配置详解

相关推荐