这篇文章主要介绍了jQuery表格插件datatables用法，包括分页、排序等功能,是jQuery表格插件datatables比较基础的部分知识,需要的朋友可以参考下
一、Datatables简介
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：
- 自动分页处理
- 即时表格数据过滤
- 数据排序以及数据类型自动检测
- 自动处理列宽度
- 可通过CSS定制样式
- 支持隐藏列
- 易用
- 可扩展性和灵活性
- 国际化
- 动态创建表格
- 免费的
二、如何使用
在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务
1、DataTables的默认配置
|
1
2
3
|
$(document).ready(
function
() {
$(
'#example'
).dataTable();
} );
|
2、DataTables的一些基础属性配置
|
1
2
3
4
5
6
|
"bPaginate"
:
true
,
//翻页功能
"bLengthChange"
:
true
,
//改变每页显示数据数量
"bFilter"
:
true
,
//过滤功能
"bSort"
:
false
,
//排序功能
"bInfo"
:
true
,
//页脚信息
"bAutoWidth"
:
true
//自动宽度
|
3、数据排序
|
1
2
3
4
5
6
7
|
$(document).ready(
function
() {
$(
'#example'
).dataTable( {
"aaSorting"
: [
[ 4,
"desc"
]
]
} );
} );
|
从第0列开始，以第4列倒序排列
4、隐藏某些列
|
1
2
3
4
5
6
7
|
$(document).ready(
function
() {
$(
'#example'
).dataTable( {
"aoColumnDefs"
: [
{
"bSearchable"
:
false
,
"bVisible"
:
false
,
"aTargets"
: [ 2 ] },
{
"bVisible"
:
false
,
"aTargets"
: [ 3 ] }
] } );
} );
|
5、国际化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$(document).ready(
function
() {
$(
'#example'
).dataTable( {
"oLanguage"
: {
"sLengthMenu"
:
"每页显示 _MENU_ 条记录"
,
"sZeroRecords"
:
"抱歉， 没有找到"
,
"sInfo"
:
"从 _START_ 到 _END_ /共 _TOTAL_ 条数据"
,
"sInfoEmpty"
:
"没有数据"
,
"sInfoFiltered"
:
"(从 _MAX_ 条数据中检索)"
,
"oPaginate"
: {
"sFirst"
:
"首页"
,
"sPrevious"
:
"前一页"
,
"sNext"
:
"后一页"
,
"sLast"
:
"尾页"
},
"sZeroRecords"
:
"没有检索到数据"
,
"sProcessing"
:
"<img src='./loading.gif' />"
}
} );
} );
|
6、排序功能：
|
1
2
3
4
5
6
7
8
9
10
11
|
$(document).ready(
function
() {
$(
'#example'
).dataTable( {
"aoColumns"
: [
null
,
{
"asSorting"
: [
"asc"
] },
{
"asSorting"
: [
"desc"
,
"asc"
,
"asc"
] },
{
"asSorting"
: [ ] },
{
"asSorting"
: [ ] }
]
} );
} );
|
7、数据获取支持4种：如下
- •DOM 文档数据
- •Javascript array js数组
- •Ajax source Ajax请求数据
- •Server side processing 服务器端数据
三、实例讲解
1、需求：如下图所示，对datatables的内容进行添加，编辑，删除的操作。
2、分析：添加功能---单击add按钮，弹出对话框，添加新的内容。
编辑功能---单击datatables可以选中一行，此行改变颜色，即是已经选中，单击edit按钮，弹出dialog，此dialog中的内容是我们选中行的内容。如果没有选中行，点击edit按钮，则不会弹出dialog。当双击datatables中的某一行时，也弹出dialog，并且双击的行改变颜色，dialog中的内容是我们双击行的内容。
删除功能---单击datatables选中一行，单击delete按钮，弹出警告框，提示要不要删除所选内容。当没有选中任何内容时，单击delete按钮，不会弹出警告框，也不会删除内容。
3、 编码：
Attributes//名称
|
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
|
<
table
id
=
"gridtable"
class
=
"gridtable"
>//声明jquery datatables
<
thead
>
<
tr
>
<
th
>Name
</
th
>
<
th
>Value
</
th
>
<
th
>DisplayOrder
</
th
>
</
tr
>
</
thead
>
<
tbody
>
.....//datatables内容，此处省略
</
tbody
>
</
table
>
<
input
type
=
"button"
id
=
"add"
value
=
"Add"
/>//添加按钮
<
input
type
=
"button"
id
=
"edit"
value
=
"Edit"
/>//编辑按钮
<
input
type
=
"button"
id
=
"delete"
value
=
"Delete"
/>//删除按钮
<
div
id
=
"e_Attributes"
>//声明dialog,异步更新
@using (Ajax.BeginForm("Update", "Product", new AjaxOptions
{
UpdateTargetId = "d_Attributes",
OnSuccess = "dialogClose",
HttpMethod = "Post",
}))
{
<
table
>
<
tbody
>
<
tr
>
<
td
>Name</
td
>
<
td
>
<
input
id
=
"name"
name
=
"Name"
type
=
"text"
style
=
"width:250px"
class
=
"required"
/>*</
td
>
</
tr
>
<
tr
>
<
td
>Value</
td
>
<
td
>
<
input
id
=
"value"
name
=
"Value"
type
=
"text"
style
=
"width:250px"
class
=
"required"
/>*</
td
>
</
tr
>
<
tr
>
<
td
>DisplayOrder</
td
>
<
td
>
<
input
id
=
"displayOrder"
name
=
"DisplayOrder"
type
=
"text"
style
=
"width:128px"
class
=
"required"
/>*</
td
>
</
tr
>
<
tr
>
<
td
>
<
input
id
=
"submit"
type
=
"submit"
name
=
"submit"
value
=
"Submit"
/>
<
input
id
=
"hiddenValue"
type
=
"hidden"
name
=
"hiddenValue"
/>
</
td
>
</
tr
>
</
tbody
>
</
table
>
}
</
div
>
|
上面代码说明：这段代码主要分了两个部分，第一部分是jquery datatables的声明，<table id="gridtable" class="gridtable">；第二部分是dialog的声明，以及操作所需要的action，此部分的操作选择ajax无刷新页面技术。所需js的代码：
|
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
|
<script type=
"text/javascript"
>
function
dialogClose() {
$(
"#e_Attributes"
).dialog(
"close"
);
}
$(
"#e_Attributes"
).dialog({
modal:
true
,
autoOpen:
false
,
show: {
effect:
"blind"
,
duration: 1000
},
hide: {
effect:
"explode"
,
duration: 1000
},
width: 400
});
var
editor;
$(
function
() {
//声明datatable
$(
"#gridtable"
).dataTable().fnDestroy();
editor = $(
'#gridtable'
).dataTable({
"bInfo"
:
false
,
"bServerSide"
:
false
,
'bPaginate'
:
false
,
//是否分页。
"bProcessing"
:
false
,
//当datatable获取数据时候是否显示正在处理提示信息。
'bFilter'
:
false
,
//是否使用内置的过滤功能。
'bLengthChange'
:
false
,
//是否允许用户自定义每页显示条数。
'sPaginationType'
:
'full_numbers'
,
//分页样式
});
//单击，赋值，改样式
$(
"#gridtable tbody tr"
).click(
function
(e) {
if
($(
this
).hasClass(
'row_selected'
)) {
$(
this
).removeClass(
'row_selected'
);
putNullValue()
}
else
{
editor.$(
'tr.row_selected'
).removeClass(
'row_selected'
);
$(
this
).addClass(
'row_selected'
);
var
aData = editor.fnGetData(
this
);
if
(
null
!= aData) {
putValue(aData);
}
}
});
//双击
$(
"#gridtable tbody tr"
).dblclick(
function
() {
if
($(
this
).hasClass(
'row_selected'
)) {
//$(this).removeClass('row_selected');
}
else
{
editor.$(
'tr.row_selected'
).removeClass(
'row_selected'
);
$(
this
).addClass(
'row_selected'
);
}
var
aData = editor.fnGetData(
this
);
if
(
null
!= aData) {
putValue(aData);
}
$(
"#hiddenValue"
).val(
"edit"
);
$(
"#e_Attributes"
).dialog(
"open"
);
});
//添加
$(
"#add"
).click(
function
() {
editor.$(
'tr.row_selected'
).removeClass(
'row_selected'
);
putNullValue();
$(
"#hiddenValue"
).val(
"add"
);
$(
"#e_Attributes"
).dialog(
"open"
);
});
//编辑
$(
"#edit"
).click(
function
() {
var
productAttributeID = $(
"#productAttributeID"
).val();
if
(productAttributeID !=
""
&& productAttributeID !=
null
) {
$(
"#hiddenValue"
).val(
"edit"
);
$(
"#e_Attributes"
).dialog(
"open"
);
}
});
//删除
$(
"#delete"
).click(
function
() {
var
productAttributeID = $(
"#productAttributeID"
).val();
var
productID = $(
"#productID"
).val();
if
(productAttributeID !=
null
&& productAttributeID !=
""
) {
if
(confirm(
"Delete?"
)) {
$.ajax({
type:
"GET"
,
url:
"@Url.Action("
DeleteAttribute
", "
Product
")"
,
data: { ProductID: productID, ProductAttributeID: productAttributeID },
//参数名要和Action 中的参数名相同
dataType:
"html"
,
cache:
false
,
success:
function
(result) {
$(
"#d_Attributes"
).html(result);
$(
"#productAttributeID"
).val(
null
);
}
});
}
}
});
//赋空值，并去除input-validation-error样式（此样式不管有无，均可去除，所以不用判断了）
function
putNullValue() {
。。。。。。／／此处省略
}
//赋值
function
putValue(aData) {
。。。。。。
//此处省略
}
});
$.ajaxSetup({ cache:
false
});
</script>
|
上面代码说明：这段代码分别为dialog 的声明，datatables的声明以add,edit,delete的操作。
添加功能效果图
编辑功能效果图：
删除效果图：
到此，功能已经全部实现，所需的代码也已经贴出。
4、分页实现
引入CSS文件和JS文件
|
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
|
<style type=
"text/css"
title=
"currentStyle"
>
@import
"DataTables-1.8.1/media/css/demo_page.css"
;
@import
"DataTables-1.8.1/media/css/demo_table.css"
;
@import
"DataTables-1.8.1/media/css/demo_table_jui.css"
;
</style>
<script type=
"text/javascript"
language=
"javascript"
src=
"DataTables-1.8.1/media/js/jquery.js"
></script>
<script type=
"text/javascript"
language=
"javascript"
src=
"DataTables-1.8.1/media/js/jquery.dataTables.js"
></script>
--------------------------------------------------------------------------
-----------最简单的方式：
$(document).ready(
function
() {
$(
"#example"
).dataTable();
});
----------也可以自己定义各属性：
<script type=
"text/javascript"
language=
"javascript"
>
$(document).ready(
function
() {
$(
"#example"
).dataTable({
// "bPaginate": true, //开关，是否显示分页器
// "bInfo": true, //开关，是否显示表格的一些信息
// "bFilter": true, //开关，是否启用客户端过滤器
// "sDom": "<>lfrtip<>",
// "bAutoWith": false,
// "bDeferRender": false,
// "bJQueryUI": false, //开关，是否启用JQueryUI风格
// "bLengthChange": true, //开关，是否显示每页大小的下拉框
// "bProcessing": true,
// "bScrollInfinite": false,
// "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值：'disabled','2000px'
// "bSort": true, //开关，是否启用各列具有按列排序的功能
// "bSortClasses": true,
// "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列
// "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%'
// "aaSorting": [[0, "asc"]],
// "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列
// "sDom": '<"H"if>t<"F"if>',
"bAutoWidth"
:
false
,
//自适应宽度
"aaSorting"
: [[1,
"asc"
]],
"sPaginationType"
:
"full_numbers"
,
"oLanguage"
: {
"sProcessing"
:
"正在加载中......"
,
"sLengthMenu"
:
"每页显示 _MENU_ 条记录"
,
"sZeroRecords"
:
"对不起，查询不到相关数据！"
,
"sEmptyTable"
:
"表中无数据存在！"
,
"sInfo"
:
"当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录"
,
"sInfoFiltered"
:
"数据表中共为 _MAX_ 条记录"
,
"sSearch"
:
"搜索"
,
"oPaginate"
: {
"sFirst"
:
"首页"
,
"sPrevious"
:
"上一页"
,
"sNext"
:
"下一页"
,
"sLast"
:
"末页"
}
}
//多语言配置
});
});
</script>
|
对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明，如下所示，
|
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
|
<
table
cellpadding
=
"0"
cellspacing
=
"0"
border
=
"0"
class
=
"display"
id
=
"example"
>
<
thead
>
<
tr
>
<
th
>
Rendering engine
</
th
>
<
th
>
Browser
</
th
>
<
th
>
Platform(s)
</
th
>
<
th
>
Engine version
</
th
>
<
th
>
CSS grade
</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
class
=
"odd gradeX"
>
<
td
>
Trident
</
td
>
<
td
>
Internet Explorer 4.0
</
td
>
<
td
>
Win 95+
</
td
>
<
td
class
=
"center"
>
4
</
td
>
<
td
class
=
"center"
>
X
</
td
>
</
tr
>
|
如果没有 thead 将会报错。
- bPaginate: 是否分页，默认为 true，分页
- iDisplayLength : 每页的行数，每页默认数量:10
- sPaginationType: 分页样式，支持两种内置方式，two_button 和 full_numbers, 默认使用 two_button。
- bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10，25，50，100。这个设置需要 bPaginate 支持。默认为 true。
- bFilter: 启用或禁止数据过滤，默认为 true。 注意，如果使用过滤功能，但是希望关闭默认的过滤输入框，应使用 sDom
- bInfo: 允许或者禁止表信息的显示，默认为 true，显示信息。
最为简单的使用方式，就是零配置的方式。
|
1
2
3
4
5
6
|
/*
* Example init
*/
$(document).ready(
function
(){
$(
'#example'
).dataTable();
});
|
以上就是关于jQuery表格插件datatables用法的详细介绍，希望对大家的学习有所帮助。
扫一扫
1352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
