我写的这个东西类似于个人笔记,如果你想要完整的而了解
可以去这里看看 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.1 ajax.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.2 ajax.dataSrc
处理从服务器返回来的请求集合
2.2.1 如果是一个string
指定用于dt中table body的数据对象名字(如果返回来的不是一个对象,而是一个纯数组。那么这个地方设为"")
一般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.3 sucess
请求成功以后DT默认做的事情在这个函数中,因为DT要使用这个做构建操作。所以不要覆盖他。如果想修改,可以通过dataSrc或者下面介绍的完全控制的方式,修改接入点。
3.如果ajax是一个function
那么你通过这个function可以完全控制ajax请求。
function ajax( data, callback, settings )
data - 发送到服务器的参数
callback - 回调函数 服务器回传的集合应该传给这个回调函数,作为其参数
settings - DT的配置对象。
例子:
$('#example').dataTable( {
"ajax": function (data, callback, settings) {
callback(
JSON.parse( localStorage.getItem('dataTablesData') )
);
}
} );
分享到:
相关推荐
Jquery dataTable API 中文文档 word版 好用实在
JQuery DataTable中文文档API.chm中文API,版本:JQuery DataTable中文文档API.chm,解压即食,
适合前端初学者 jquery中的datatable使用ajax读取数据 并展示表格数据
jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!jquery datatable 单元格合并,通过js实现相同内容单元格动态合并!!!
jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...
jquery datatable api chm 中文
NULL 博文链接:https://rhodian.iteye.com/blog/2193305
分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!,希望对大家有用。
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换,一个详细完整的例子!
jquery datatable
分两个部分,第一个部分前台分页、排序、检索等。 第二个部分,我实现了后台分页,排序,但是检索没能实现。
Jquery DataTable是一个很不错的表格插件。 1、功能强大,支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源; 4、众多使用者的实例代码
JQuery DataTable 插件 V2.0,网上看到的,觉得不错就上传上来,供大家一起共同分享学习。
jQuery datatable1.10.5 api 有demo可以查看
使用jquery DataTable在js中这么写 $(function() { $('#data-table').DataTable( { order : [ [ 1, 'desc' ] ], ajax : { url : /products, type : 'GET', dataSrc : }, ...
jquery datatable 大数据分页面的解决方案
在.Net下如何使用Jquery DataTable,案例中有很多技巧和演示,是了解DataTable较好的学习案例。
jquery的DataTable
分页DATATABLE 适合整合STRUTS2
jquery datatable serverside page 服务器端分页