jquery datatable ajax配置详解
我写的这个东西类似于个人笔记,如果你想要完整的而了解
可以去这里看看 http://dt.thxopen.com/
包括英文原网站都不错.
通过配置ajax的属性和服务器交互
$("selector").dataTable(
"processing" : true,//显示“处理中...”
"serverSide" : true,//开启服务器模式。
"data":[....],
"ajax":{.....}
);
处理模式(Processing modes)
DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
- 客户端处理(Client)—— 所有的数据集预先加载(一次获取所有数据),数据处理都是在浏览器中完成的【逻辑分页】。
- 服务器端处理(ServerSide)—— 数据处理是在服务器上执行(页面只处理当前页的数据)【物理分页】。
每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。根据经验来看,数据少于 10,000 行你可以选择客户端模式,超过 10,000 行的使用服务器端处理。 请注意,两种处理模式不能同时使用,但是可以动态更改从一个模式到另一个。
PS:当然这个不是一定的,针对数据是可增长的,不确定最终数据是多少那么最好是选择服务器模式,如果是确定的数据,利用缓存选择客户端模式也未尝不可
服务器模式 :需要启用 serverSideOption
属性,完整的介绍参考 服务器处理(server-side)
首先明确: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 ajax配置详解的更多相关文章
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- 触碰jQuery:AJAX异步详解(转)
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jQuery中 $.ajax()方法详解
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- Jquery使用ajax参数详解
记录一下 Jquery使用ajax(post.get及参数详解) 1.get: $.ajax({ type: "GET", url: baseUrl + "Showco ...
- Jquery的AJAX应用详解
案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id=" ...
- jQuery之$.ajax()方法详解及实例
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- Jquery中 $.Ajax() 参数详解
1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type:要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如pu ...
- jquery中的ajax方法详解
定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...
随机推荐
- ArgumentError:Error #2004:某个参数无效
1.错误描述 ArgumentError:Error #2004:某个参数无效 at flash display::Graphics/drawRect() at ZeroClipboard() 2.错 ...
- Array.from()
es6 Array.from() 方法将两类对象转为真正的数组 用法:用于将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)的对象(包含ES6新增的数据结构Set和Map); 说明: ...
- C#方法有关内容的总结--C#基础
1.静态方法与实例方法 using System;using System.Collections.Generic;using System.Linq;using System.Text;using ...
- BZOJ 3527: [ZJOI2014]力(FFT)
BZOJ 3527: [ZJOI2014]力(FFT) 题意: 给出\(n\)个数\(q_i\),给出\(Fj\)的定义如下: \[F_j=\sum \limits _ {i < j} \fra ...
- 【BZOJ4403】序列统计(组合数学,卢卡斯定理)
[BZOJ4403]序列统计(组合数学,卢卡斯定理) 题面 Description 给定三个正整数N.L和R,统计长度在1到N之间,元素大小都在L到R之间的单调不降序列的数量.输出答案对10^6+3取 ...
- [BZOJ2298] [HAOI2011] problem a (dp)
Description 一次考试共有n个人参加,第i个人说:“有ai个人分数比我高,bi个人分数比我低.”问最少有几个人没有说真话(可能有相同的分数) Input 第一行一个整数n,接下来n行每行两个 ...
- 自言自语WEB前端面试题(二)
今天换道题,新鲜出炉的 var Model=function(){ this.name='lilei'; this.age=20; } Model.prototype.say=function(){ ...
- HttpSessionActivationListener序列化与反序列化
一.序列化与反序列化 1.什么是序列化 把对象转化位字节序列的过程称为序列化(保存到硬盘,持久化) 把字节序列转化位对象的过程称为反序列化(存放于内存) 2.序列化的用途 把对象的字节序列永久保存到硬 ...
- NOI2001炮兵阵地
题目传送门 PS:本道题目建议在对状压dp有一定了解的基础下学习,如有不懂可以先去学一下状压dp入门 题目大意:给你n*m个格子,有些格子可以用来部署军队,用P表示,有些则不能,用H表示,如果在一个格 ...
- Java中常见数据结构Map之LinkedHashMap
前面已经说完了HashMap, 接着来说下LinkedHashMap. 看到Linked就知道它是有序的Map,即插入顺序和取出顺序是一致的, 究竟是怎样做到的呢? 下面就一窥源码吧. 1, Link ...