1.首先需要引用下面两个文件

1
2
 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
\>

2.DataTable支持的数据类型

https://www.datatables.net/manual/data/

2.1 数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
vardata = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
],
[
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
]
]

2.2 对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
]

2.3 自定义实例(本质和2.2一样)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
functionEmployee ( name, position, salary, office ) {
this.name = name;
this.position = position;
this.salary = salary;
this._office = office;
this.office = function() {
returnthis._office;
}
};

$('#example').DataTable( {
data: [
newEmployee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh"),
newEmployee( "Garrett Winters", "Director", "$5,300", "Edinburgh")
],
columns: [
{ data: 'name'},
{ data: 'salary'},
{ data: 'office'},
{ data: 'position'}
]
} );

2.4 Datatable的数据来源

1.DOM

如果没有指定data,ajax选项,则DataTable会将当前table的html标签上内容转换成对应的数据(Array数据形式)。

2.Html5

Data-* 标签上可以指定不同的值,用于排序和查找,td内部标签的值对应当前单元格的数据。

1
2
3
<td data-search="21st November 2016 21/11/2016" data-order="1479686400">
21st November 2016
</td>

3.javascript

通过data配置,指定数据源。可以通过DataTables API row.add() row().remove()操作行数据。

4.Ajax

通过服务器端分页的方式,取得数据。返回的数据只能是json数组或对象(上面的2.1和2.2).

3.有两种分页方式

3.1 客户端分页

这种方式,代码最简单,整个数据量在10000条以内可以考虑。假设已经有了下面的table:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table id="table1" class="table table-condensed">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>zhang</td>
<td>98</td>
</tr>
<tr>
<td>002</td>
<td>wang</td>
<td>99</td>
</tr>
</tbody>
</table>

简单调用一句话(使用默认设置),就可以使table具有排序,查找,分页的基本功能。

1
2
3
$(function () {
$("#table1").DataTable({ });
});

3.2 服务器端分页

这种方式针对大数据量的table(10万条以上),每次只读取当前的一页数据,分页在后台做。代码相对复杂,不过页面响应更快,服务器端的分页一般要求我们先定义thead表头,tbody可以不写。

4.配置参数

这些配置参数可以通过javascript进行设置,也可以直接用HTML5标签data-* 的方式写在table的标签中。

所有的配置选项:https://www.datatables.net/reference/option/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
$(function () {

$("#table1").DataTable({
// 是否允许检索
"searching": false,
// 是否允许排序
"ordering": true,
// 初期排序列
//"order": [[0,'asc'],[1,'desc']],
// 是否显示情报 就是"当前显示1/100记录"这个信息
"info": false,
// 是否允许翻页,设成false,翻页按钮不显示
"paging": false,
// 水平滚动条
"scrollX": false,
// 垂直滚动条
"scrollY": false,
// 件数选择功能 默认true
"lengthChange": false,
// 件数选择下拉框内容
"lengthMenu": [10, 25, 50, 75, 100],
// 每页的初期件数 用户可以操作lengthMenu上的值覆盖
"pageLength": 50,
//翻页按钮样式
// numbers:数字
// simple:前一页,后一页
// simple_numbers:前一页,后一页,数字
// full:第一页,前一页,后一页,最后页
//full_numbers:第一页,前一页,后一页,最后页,数字
//first_last_numbers:第一页,最后页,数字
"pagingType": "full_numbers",
// 行样式应用 指定多个的话,第一行tr的class为strip1,第二行为strip2,第三行为strip3.
// 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状,这里的class必须指定为2个。
"stripeClasses": ['strip1', 'strip2', 'strip3'],
// 自动列宽
"autoWidth": true,
// 是否表示 "processing" 加载中的信息,这个信息可以修改
"processing": true,
// 每次创建是否销毁以前的DataTable,默认false
"destroy": false,
// 控制表格各种信息的表示位置(比较复杂) 默认:lfrtip
// 具体参考:https://datatables.net/reference/option/dom
"dom": 'lrtip',
"language": {
"processing": "DataTables is currently busy",
// 当前页显示多少条
"lengthMenu": "Display _MENU_ records",
// _START_(当前页的第一条的序号) ,_END_(当前页的最后一条的序号),_TOTAL_(筛选后的总件数),
// _MAX_(总件数),_PAGE_(当前页号),_PAGES_(总页数)
"info": "Showing page _PAGE_ of _PAGES_",
// 没有数据的显示(可选),如果没指定,会用zeroRecords的内容
"emptyTable": "No data available in table",
// 筛选后,没有数据的表示信息,注意emptyTable优先级更高
"zeroRecords": "No records to display",
// 千分位的符号,只对显示有效,默认就是"," 一般不要改写
//"thousands": "'",
// 小数点位的符号,对输入解析有影响,默认就是"." 一般不要改写
//"decimal": "-",
// 翻页按钮文字控制
"paginate": {
"first": "First page",
"last": "Last page",
"next": "Next page",
"previous": "Previous page"
},
// Client-Side用,Server-Side不用这个属性
"loadingRecords": "Please wait - loading..."
},
// 默认是false
// 如果设为true,将只渲染当前也的html,速度会很快,但是通过API就访问不到所有页的数据,有利有弊
//"deferRender": false,
// 服务器端处理方式
"serverSide": true,

// ajax选项 可以直接简单指定成请求的文件
//"ajax": "data.json",
// 也可以用对象来配置,更加灵活
"ajax": {
// url可以直接指定远程的json文件,或是MVC的请求地址 /Controller/Action
url: "data.json",
type: 'POST',
// 传给服务器的数据,可以添加我们自己的查询参数
data: function (param) {
param.opportunityNO = $('#txtSearch').val();
return param;
},
//用于处理服务器端返回的数据。 dataSrc是DataTable特有的
dataSrc: function (myJson) {
if (myJson.timeout) {
return "";
}
return myJson;
}
},
//指定用于行ID的属性名 默认是:DT_RowId
"rowId": 'staffId',
// 列定义
"columns": [
{
// data 可以是属性名,或嵌套属性(WORKTM1.ID),数组ArrOne[,] 用中括号中的字符连接数组后返回。
"data": "WORKTM1",
// 这里的class会应用到td上面
"className": "dt-body-right",
// 列宽
"width": 40,
// 很灵活,描绘每个单元格
// data:当前cell的data,这个data和type有关
// type:filter,display,type,sort
// row:当前行数据
// https://datatables.net/reference/option/columns.render
"render": function (data, type, row, meta) {
return type === 'display' && data.length > 40 ?
'<span title="' + data + '">' + data.substr(0, 38) + '...</span>' : data;

},
// 是否可排序 默认值:true
"orderable": true,
// 指定当前列排序操作的时候,用哪一列(几列)的数据进行真正的排序(通常是隐藏的)
"orderData": [0, 1],
// 这个属性 和type属性相似,指定排序时候这一列该怎么转换数据,
//需要用到其他的插件 详细: https://datatables.net/plug-ins/sorting/
"orderDataType": "dom-text",
// 是否显示当前列 默认值:true
"visible": false,
// 是否允许搜索此列 默认值:true
"searchable": false,
//这个属性仅Client-Side有效, Server-Side在服务器端排序
//主要用于排序和筛选,指定当前列作为什么类型进行解析
//内置值:date,num,num-fmt,html-num,html-num-fmt,html,string
// 还可以用其他插件提供的类型 :详细: https://datatables.net/plug-ins/sorting/
// 有html开头的,都会讲html标签先移除后进行数据处理
"type": "html",
// 列头文字,如果没有指定thead,则会生成。如何指定了thead,则会覆盖当前列头文字
"title": "My column title",
// defaultContent:默认值,属性值为null或undefined就会用这个值
"defaultContent": "<i>Not set</i>",
// 单元格类型:"th","td"
"cellType" : "td",
// 单元格创建完后的回调,可以作为render的补充
// cell:TD的dom
// cellData:原始的单元格数据,如何render中进行了格式化,用$(cell).html()来取格式化后的数据
// rowData:行数据
// row:行号
// col:列号
"createdCell": function (cell, cellData, rowData, row, col) {
if ( cellData < 1 ) {
$(td).css('color', 'red')
}
}
},
{ "data": "WORKTM2", "className": "dt-body-right", "width": 40 },
{ "data": "WORKTM3", "className": "dt-body-right", "width": 40 },
{ "data": "WORKTM4", "className": "dt-body-right", "width": 40 },
{ "data": "RESTDAY1", "className": "dt-body-right", "width": 40 },
{ "data": "RESTDAY2", "className": "dt-body-right", "width": 40 },
{ "data": "RESTDAY3", "className": "dt-body-right", "width": 40 },
{ "data": "RESTDAY4", "className": "dt-body-right", "width": 40 },
{ "data": "RESTDAY5", "className": "dt-body-right", "width": 40 }
],
// 和上面的columns类似,columns可以定义的属性,都可以在这里定义,
// 另外增加targets属性用于指定列范围(可以多列)
// 优先级:上面的columns高于columnDefs
columnDefs: [
{
targets: [0, 2],
render: function (data, type, row, meta) {
if (type === 'display') {
var ctemp = $(".dayinfo").children().eq(meta.col).attr("class");
var cname = ctemp ? ctemp : "";
var readonly = $(".dayinfo").children().eq(meta.col).attr("data-fixed") == "fixed" ? "readonly" : "";
return '<input type="input" class="form-control dt-body-center ' + cname + '" ' + readonly + ' value="' + data + '">';
}
return data;
},
}],
// 每一行创建完调用的函数
"createdRow": function (row, data, dataIndex) {
// row : tr dom
// data: row data
// dataIndex:row data's index
if (data[4] == "A") {
$(row).addClass('important');
}
},
// 每一行被创建,但还没有被加载到document中,这个函数优先于createdRow
// 个人觉得用createdRow更好
"rowCallback": function (row, data, index) {
// row : tr dom
// data: row data
// index:row data's index
if ( data[4] == "A" ) {
$('td:eq(4)', row).html( '<b>A</b>' );
}
},
//thead被描画后调用
"headerCallback": function (thead, data, start, end, display) {
//thead:dom, data:原始的datatable数据,display:当前显示排序好的datatable数据(有可能经过排序)
// start end :当前dispaly数据的开始结束序号
$(thead).find('th').eq(0).html( 'Displaying '+(end-start)+' records' );
},
// tfoot被描画后调用,通常可用于计算合计值
"footerCallback": function (tfoot, data, start, end, display) {
//tfoot:dom, data:原始的datatable数据,display:当前显示排序好的datatable数据(有可能经过排序)
// start end :当前dispaly数据的开始结束序号
var api = this.api();
$( api.column( 5 ).footer() ).html(
api.column( 5 ).data().reduce( function ( a, b ) {
return a + b;
}, 0 )
);
},
// 初始化,描画都已经完成,常用于ajax
"initComplete": function( settings, json ) {
$('div.loading').remove();
},
// 每次DataTable描画后都要调用,调用这个函数时,table可能没有描画完成,
// 所以不要在里面操作table的dom,要操作dom应放在initComplete
"drawCallback": function( settings ) {
var api = this.api();

// Output the data for the visible rows to the browser's console
console.log( api.rows( {page:'current'} ).data() );
},
// 这个函数可以改写数字的格式化方式
// 默认DataTable用 language.thousands来解析数字,“,”
"formatNumber": function ( toFormat ) {
return toFormat.toString().replace(
/\B(?=(\d{3})+(?!\d))/g, "'"
);
}
});
});

5.服务器端的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 发送到服务器端的数据
// draw:计数器,返回数据的时候用这个值设定
// start:开始记录(0 besed index)
// length:每页条数
// search[value]:检索文字
// order[i][column]:int 排序列的序号 例如:2,代表第3列排序 i代表有几个排序,一个的话服务器端这样写“order[0][column]”
// order[i][dir]:排序的方式"desc","asc"
// 下面comuns中的i取值从0~columns.length,所有的columns信息都发送到了服务器
// columns[i][data]:columns上定义的data属性值
// columns[i][name]:columns上定义的name属性值
// columns[i][searchable]:列能不能检索
// columns[i][orderable]:列能不能排序
// columns[i][search][value]:列的检索值 string

// 服务器返回的数据
// draw:和Request的draw设定成一样的值
// recordsTotal:所有的总件数
// recordsFiltered:筛选后的总件数
// data:返回的数据
// 每一行数据上面,可以包含这几个可选项
// DT_RowId:加在行上的ID值
// DT_RowClass:加在行上的Class
// DT_RowData:加在行上的额外数据(object)
// DT_RowAttr:加在行上的属性(object)
// error:如果有错误,就设定这个值,没有错误,不要包含这个值

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using AppBlock;
using System.Data.SqlClient;
using Newtonsoft.Json;

namespace alfest.Ajax
{
public partial class Category : System.Web.UI.Page
{
string mode, option, user, limit, start, searchKey, orderByColumn, orderByDir, estMstSrno, pnlsrno, draw, jsonString;
CommonClass cmnCls = new CommonClass();
protected void Page_Load(object sender, EventArgs e)
{
mode = Request.QueryString["mode"] == null ? "" : Request.QueryString["mode"].ToString();
option = Request.QueryString["option"] == null ? "" : Request.QueryString["option"].ToString();
limit = Request.QueryString["length"] == null ? "" : Request.QueryString["length"].ToString();
start = Request.QueryString["start"] == null ? "" : Request.QueryString["start"].ToString();
user = Request.QueryString["user"] == null ? "" : Request.QueryString["user"].ToString();
searchKey = Request.QueryString["search[value]"] == null ? "" : Request.QueryString["search[value]"].ToString();
orderByColumn = Request.QueryString["order[0][column]"] == null ? "" : Request.QueryString["order[0][column]"].ToString();
orderByDir = Request.QueryString["order[0][dir]"] == null ? "" : Request.QueryString["order[0][dir]"].ToString();
estMstSrno = Request.QueryString["estMstSrno"] == null ? "" : Request.QueryString["estMstSrno"].ToString();
pnlsrno = Request.QueryString["pnlsrno"] == null ? "" : Request.QueryString["pnlsrno"].ToString();
draw = Request.QueryString["draw"] == null ? "" : Request.QueryString["draw"].ToString();

if (option == "GetAllAdminCategory")
{

// Cls_Category CatgObj = new Cls_Category();
// CatgObj.orderColumn = Convert.ToInt32(orderByColumn);
// CatgObj.limit = Convert.ToInt32(limit);
// CatgObj.orderDir = orderByDir;
// CatgObj.start = Convert.ToInt32(start);
// CatgObj.searchKey = searchKey;
// CatgObj.option = "GetAllAdminCategory";

// or user your own method to get data (just fill the dataset)

// DataSet ds = cmnCls.PRC_category(CatgObj);

dynamic newtonresult = new
{
status = "success",
draw = Convert.ToInt32(draw == "" ? "0" : draw),
recordsTotal = ds.Tables[1].Rows[0][0],
recordsFiltered = ds.Tables[1].Rows[0][0],
data = ds.Tables[0]
};
jsonString = JsonConvert.SerializeObject(newtonresult);

Response.Clear();
Response.ContentType = "application/json";
Response.Write(jsonString);

}
}
}
}

6.DataTable常用事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//常用事件
// init:初始化和数据都加载完成,和 initComplete配置等价
$('#example')
.on('init.dt', function () {
console.log('Table initialisation complete: ' + new Date().getTime());
})
.dataTable();

// error:处理数据出错 errMode必须为“none”,才会触发error事件
$.fn.dataTable.ext.errMode = 'none'; // alert,throw,none, a function
$('#example')
.on('error.dt', function (e, settings, techNote, message) {
console.log('An error has been reported by DataTables: ', message);
})
.DataTable();

// xhr:ajax加载数据完成后调用,这时数据并没有被描画,等价于 ajax.dataSrc
$('#example')
.on('xhr.dt', function (e, settings, json, xhr) {
for (var i = 0, ien = json.aaData.length ; i < ien ; i++) {
json.aaData[i].sum = json.aaData[i].one + json.aaData[i].two;
}
// Note no return - manipulate the data directly in the JSON object.
})
.dataTable({
ajax: "data.json"
});

7.Datatable常用Api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 //全部参考 https://datatables.net/reference/api/
// 1,获取API的方式
// 注意 $(selector).dataTable()得到的是table的jquery对象
// 而api对象只能通过:api.$(select) 返回查找到的jquery对象。
$(selector).DataTable();
$(selector).dataTable().api();
new $.fn.dataTable.Api(selector);

// 2,得到一个api对象
var table = $('#example').DataTable();

//3,描画 draw( [paging] ) 取值:true 全部重画,false 全部重画(保持当前的页面),
// "page" 不重取数据,只描画当前页
$('#myFilter').on('keyup', function () {
table.search(this.value).draw();
});

// Sort by column 1 and then re-draw
table.order([[1, 'asc']]).draw(false);
table.page('next').draw('page');

// data() 获取全表数据
// Increment a counter for each row
table.data().each(function (d) {
d.counter++;
});

// 4,column().data() 获取列数据
// cloumn的第一个参数 可以是序号,或jquery支持的选择器
// cloumn的第二个参数 是一个 selector-modifier 对象,取值如下
//{
// // DataTables core
// order: 'current', // 'current', 'applied', 'index', 'original'
// page: 'all', // 'all', 'current'
// search: 'none', // 'none', 'applied', 'removed'

// // Extension - KeyTable (v2.1+) - cells only
// focused: undefined, // true, false, undefined

// // Extension - Select (v1.0+)
// selected: undefined // true, false, undefined
//}
table.column(3, { order: 'current' }).data();

//5,row().data() 获取行数据
$('#example tbody').on('click', 'tr', function () {
console.log(table.row(this).data());
});

// 6,row().node() 获取行dom对象
$(table.row('#row-4').node()).addClass('ready');

// 7,row().remove(); 删除当前行
table.row('#row-4').remove();

// 8, row.add() 加一行数据
// rows.add() 加多行数据
table.row.add({id:"1",name:"li"});

// 9, table().body() 获取tbody dom 对象
// table().header() 获取theader dom 对象
// table().footer() 获取tfooter dom 对象
// table().node() 获取table dom 对象
$(table.table().footer()).addClass('highlight');

// 10,destroy() 销毁table true:连同html一起销毁
table.destroy(false)

// 11,on 绑定table的事件
table.on('xhr', function (e, settings, json) {
console.log('Ajax event occurred. Returned data: ', json);
});
// 12,page.len(10) 设置一页显示的条数
$('#_10').on('click', function () {
table.page.len(10).draw();
});

8.其他

8.1 重新加载数据

第二个参数为false的话,会保持当前的选中页。

1
2
3
4
5
6
7
vartable = $('#example').DataTable();

table.ajax.reload( function( json ) {

$('#myInput').val( json.lastInput );

} , true);

8.2 改变url,再加载

1
table.ajax.url( 'newData.json').load();

8.3 获取服务器返回的json数据

1
2
3
4
5
6
7
8
9
vartable = $('#example').DataTable();

table.on( 'xhr', function() {

varjson = table.ajax.json();

alert( json.data.length +' row(s) were loaded');

} );

9.转载

1.Datatable