jquery分页插件datatables各参数详细说明及简单应用

1
2
3
4
5
6
7
8
9
10
11

<style type="text/css" title="currentStyle">
@import "./style/datatable/css/demo_page.css";
@import "./style/datatable/css/demo_table.css";
</style>
<script type="text/javascript" src="./style/datatable/js/jquery.js"></script>
<script type="text/javascript" src="./style/datatable/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();//其中example为table的id，table中必须有thead！
} );
</script>

1
2
3

$(document).ready(function() {
$('#example').dataTable();
} );

1
2
34
5
6

"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": true, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true,//自动宽度

1

"aaSorting": [[ 4, "desc" ]],//设置第5个元素为默认排序

1

$('.example').dataTable(

1
2
34

"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },//bSearchable：是否可搜索；bVisible：是否可见；aTargets：哪一列
{ "bVisible": false, "aTargets": [ 3 ] }//
]

1

"sDom": '<"top"i>rt<"bottom"flp><"clear">'

1
2
3
4
5
6
7
8
9
10
1112
13

<div class="top">这里显示 当前条数，总共条数</div>
这里显示 请求中的提示信息，表单内容
<div class="bottom">这里显示 搜索框，每页数量选择，翻页按钮</div>
<div class="clear"></div>
 
//l - 每页数量选择select
//f – 搜索框search
//t – 表单内容table
//i – 当前条数，总共条数information
//p – 翻页按钮pagination
//r – 请求中的提示信息
//< 和 > – 一个div的开始与结束
//<"class"> – class为div的class名称

1

"bStateSave": true

1

"sPaginationType": "full_numbers"

1
2
3

"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true

12

"sScrollY": "200px",
"bPaginate": false //该参数为是否显示分页，如果设置为true貌似就没什么意义了

1
2
3

"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%"

1

@import "./style/datatable/css/demo_table.css";

1
2
3

@import "./style/datatable/css/demo_table_jui.css";
主题一：
引入<pre lang="html" line="1">@import "./style/datatable/themes/smoothness/jquery-ui-1.8.4.custom.css";

1

@import "./style/datatable/themes/ui-lightness/jquery-ui-1.8.4.custom.css";

1
2
3
4
5
6
7
8
9
10
1112
13
14
15

"oLanguage": {
"sLengthMenu": "每页显示 _MENU_条",
"sZeroRecords": "没有找到符合条件的数据",
"sProcessing": "<img src=’./loading.gif’ />",
"sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
"sInfoEmpty": "木有记录",
"sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
"sSearch": "搜索：",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
}

1

"sUrl": "media/language/de_DE.txt" //文件格式和上面一样

1
2
3
4
5
6
7
8
9
10
1112
13
14
15
16
17
18
19
20
2122
23
24

var asInitVals = new Array();
$('#example').dataTable 修改为：var oTable =$('#example').dataTable
加入：
/*过滤代码开始*/
$("tfoot input").keyup( function () {
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );

1
2
34
5
6
7

<tr>
<th><input type="text" name="search_engine" value="Search engines" class="search_init" /></th>
<th><input type="text" name="search_browser" value="Search browsers" class="search_init" /></th>
<th><input type="text" name="search_platform" value="Search platforms" class="search_init" /></th>
<th><input type="text" name="search_version" value="Search versions" class="search_init" /></th>
<th><input type="text" name="search_grade" value="Search grades" class="search_init" /></th>
</tr>

1
2
34
5
6
7
8
9
10

/* 构造每一行详情的函数 fnFormatDetails*/
function fnFormatDetails ( oTable, nTr ){
var aData = oTable.fnGetData( nTr );
var sOut = '<table cellpadding="6" cellspacing="0" border="0" style="padding-left:50px;">'; //在这里定义要返回的内容
sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
return sOut;
}

1
2
3
4
5
6
7
8
9
10
1112

/*显示每一行详情用_start*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '<img src="./style/datatable/images/details_open.png">';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example tbody tr').each( function () {
this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*显示每一行详情用_end*/

1
2
3
4
5
6
7
8
9
10
1112
13
14

/*加入展开，收缩每一行详情按钮用*/
$('#example tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
this.src = "./style/datatable/images/details_open.png";
oTable.fnClose( nTr );
}
else
{
this.src = "./style/datatable/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );

1
2
3
4
5
6
7
8
9
10
1112
13
14
15
16
17
18
19
20
2122
23
24
25
26
27
28
29
30
3132
33
34
35
36
37
38
39
40
4142
43
44
45
46
47
48
49
50
5152
53
54
55
56
57
58
59
60
6162
63
64
65
66
67
68
69
70
7172
73
74
75
76
77
78
79
80
8182
83
84
85
86
87
88
89
90
9192
93
94
95
96
97
98
99
100
101102
103
104
105
106
107
108
109
110
111112
113
114
115
116
117
118
119
120
121122
123
124
125
126
127
128
129
130
131132
133
134
135
136
137
138
139
140
141142
143
144
145
146
147
148
149
150
151152
153
154
155
156
157
158
159
160
161162
163
164
165
166
167
168
169
170
171172
173
174
175
176
177
178
179
180
181182
183
184

<?php
$mysqli=new mysqli("localhost","root","","database");
$mysqli->query("SET NAMES utf8");
 
$result=$mysqli->query("SELECT * FROM `table` limit 500");
if(!$result){
echo "查询出错！";
exit;
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" title="currentStyle">
@import "./style/datatable/css/demo_page.css";
@import "./style/datatable/css/demo_table_jui.css";
@import "./style/datatable/themes/smoothness/jquery-ui-1.8.4.custom.css";
body{ font-size:12px;}
table{ font-size:12px;}
</style>
<script type="text/javascript" src="./style/datatable/js/jquery.js"></script>
<script type="text/javascript" src="./style/datatable/js/jquery.dataTables.min.js"></script>
 
<script type="text/javascript">
/* 构造每一行详情的函数 fnFormatDetails*/
function fnFormatDetails ( oTable, nTr ){
var aData = oTable.fnGetData( nTr );
var sOut = '<table cellpadding="6" cellspacing="0" border="0" style="padding-left:50px;">'; //在这里定义要返回的内容
sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
return sOut;
}
 
/*页面元素加载完成后开始执行*/
$(document).ready(function() {
/*显示每一行详情用_start*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '<img src="./style/datatable/images/details_open.png">';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example tbody tr').each( function () {
this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*显示每一行详情用_end*/
 
var asInitVals = new Array(); //用于每一列搜索过滤
var oTable =$('#example').dataTable( //var oTable用于每一列搜索过滤
{
/*基本参数设置，以下参数设置和默认效果一致*/
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": true, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true,//自动宽度
/*默认排序设置*/
"aaSorting": [[ 4, "desc" ]],//设置第5个元素为默认排序
/*默认翻页样式设置*/
"sPaginationType": "full_numbers",
/*是否开启主题*/
"bJQueryUI": true,
/*语言设置*/
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_条",
"sZeroRecords": "没有找到符合条件的数据",
"sProcessing": "<img src=’./loading.gif’ />",
"sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
"sInfoEmpty": "木有记录",
"sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
"sSearch": "搜索：",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
}
}
);
 
/*每一列搜索过滤代码开始*/
$("tfoot input").keyup( function () {
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
 
/*加入展开，收缩每一行详情按钮用*/
$('#example tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
this.src = "./style/datatable/images/details_open.png";
oTable.fnClose( nTr );
}
else
{
this.src = "./style/datatable/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
</script>
</head>
 
<body>
<div style=" width:800px; margin:0 auto;">
<table cellpadding="0" cellspacing="0" class="display" border="0" id="example">
<thead>
<tr>
<th>ID</th>
<th>时间</th>
<th>数量</th>
<th>次数</th>
<th>消耗</th>
</tr>
</thead>
<tbody>
<?php
while($rows=$result->fetch_assoc()){
$rows['time']=date("Y-m-d H:i:s",$rows['time']);
echo "
<tr>
<td>{$rows['ID']}</td>
<td>{$rows['time']}</td>
<td>{$rows['r_num']}</td>
<td>{$rows['r_times']}</td>
<td>{$rows['money']}</td>
</tr>";
}
?>
</tbody>
<tfoot>
<tr>
<th></th>
<th>ID</th>
<th>时间</th>
<th>数量</th>
<th>次数</th>
<th>消耗</th>
</tr>
<tr>
<th></th>
<th><input type="text" name="search_engine" value="Search engines" class="search_init" /></th>
<th><input type="text" name="search_browser" value="Search browsers" class="search_init" /></th>
<th><input type="text" name="search_platform" value="Search platforms" class="search_init" /></th>
<th><input type="text" name="search_version" value="Search versions" class="search_init" /></th>
<th><input type="text" name="search_grade" value="Search grades" class="search_init" /></th>
</tr>
</tfoot>
</table>
<style>
#example tr.even:hover {background-color: #ECFFB3;}
#example tr.even:hover td.sorting_1 {background-color: #DDFF75;}
#example tr.even:hover td.sorting_2 {background-color: #E7FF9E;}
#example tr.even:hove3 {background-color: #E2FF89;}
#example tr.odd:hover {background-color: #E6FF99;}
#example tr.odd:hover td.sorting_1 {background-color: #D6FF5C;}
#example tr.odd:hover td.sorting_2 {background-color: #E0FF84;}
#example tr.odd:hover td.sorting_3 {background-color: #DBFF70;}
</style>
</div>
</body>
</html>