注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

php开发lamp

《西安--木木》-经历丰富了生活。 架构师QQ群: 246695517

 
 
 

日志

 
 

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

2014-05-07 17:05:34|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

简介:Datatables是一款强大的jquery分页插件,不但具备分页功能,还可进行数据搜索过滤、排序等功能。
当前最新版本:v1.9.0
下载地址:

http://www.datatables.net/download/

http://115.com/file/dp5u9szo

寒风提醒:下载后,将media文件夹里面的css,images,js文件夹拷贝到你的网站即可。接下来引入以下内容:

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="http://net08118.blog.163.com/blog/./style/datatable/js/jquery.js"></script>
<script type="text/javascript" src="http://net08118.blog.163.com/blog/./style/datatable/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
	    $('#example').dataTable();//其中example为table的id,table中必须有thead!
	} );
</script>

1. datatables简单示例

http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html

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

这个是不进行参数配置,效果如下图:


2. 进行基本参数配置

http://www.datatables.net/release-datatables/examples/basic_init/filter_only.html

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

寒风说明:以上参数配置实现的显示效果和第一个是一样的。
3. 默认排序设置,aaSorting

http://www.datatables.net/release-datatables/examples/basic_init/table_sorting.html

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


4. 多个datatable

http://www.datatables.net/release-datatables/examples/basic_init/multiple_tables.html

寒风说明:
将表单id改为class:
初始化:

1
$('.example').dataTable(

即可。
5. 隐藏部分列的内容,aoColumnDefs

http://www.datatables.net/release-datatables/examples/basic_init/hidden_columns.html

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


6. 修改表单各元素显示位置

http://www.datatables.net/release-datatables/examples/basic_init/dom.html

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

表示的html为:

1
2
3
4
5
6
7
8
9
10
11
12
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名称

7. 保存当前页面信息为cookie,默认关闭

http://www.datatables.net/release-datatables/examples/basic_init/state_save.html

1
"bStateSave": true

如果用户关闭页面后重新打开该页面,该列表会和关闭前的状态完全一样(长度,过滤,分页和排序)

8. 修改默认分页显示样式

http://www.datatables.net/release-datatables/examples/basic_init/alt_pagination.html

1
"sPaginationType": "full_numbers"


9. x轴宽度限制

http://www.datatables.net/release-datatables/examples/basic_init/scroll_x.html

1
2
3
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true

用的很少

10. y轴高度限制

http://www.datatables.net/release-datatables/examples/basic_init/scroll_y.html

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

11. x轴、y轴均限制

http://www.datatables.net/release-datatables/examples/basic_init/scroll_xy.html

1
2
3
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%"

12. 应用主题

http://www.datatables.net/release-datatables/examples/basic_init/themes.html

需要拷贝examples/examples_support/themes文件夹到style/datatable里面

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";

主题二是橘色系的,木有第一个smoothness好看,这里就不截图了!

13. 语言设置

http://www.datatables.net/release-datatables/examples/basic_init/language.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_条",
"sZeroRecords": "没有找到符合条件的数据",
"sProcessing": "&lt;img src=’./loading.gif’ /&gt;",
"sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条",
"sInfoEmpty": "木有记录",
"sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
}

也可以直接指定语言包,txt文件:

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


14. 各列数据input过滤

http://www.datatables.net/release-datatables/examples/api/multi_filter.html

最前面加入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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)];
}
} );

tfoot里面加入:

1
2
3
4
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>


15. 每一行点击详情效果

http://www.datatables.net/release-datatables/examples/api/row_details.html

在最前面引入函数:

1
2
3
4
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;
}

ready(function)里面开头加入:

1
2
3
4
5
6
7
8
9
10
11
12
/*显示每一行详情用_start*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '<img src="http://net08118.blog.163.com/blog/./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*/

ready(function)里面末尾加入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*加入展开,收缩每一行详情按钮用*/
$('#example tbody td img').live('click', function () {
    var nTr = $(this).parents('tr')[0];
    if ( oTable.fnIsOpen(nTr) )
    {
        this.src="http://net08118.blog.163.com/blog/./style/datatable/images/details_open.png";
        oTable.fnClose( nTr );
    }
    else
    {
        this.src="http://net08118.blog.163.com/blog/./style/datatable/images/details_close.png";
        oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
    }
} );

值得注意的是,如果加入了tfoot,必须手动在里面加入多一行th!

最后,写的简单的php+mysql+datatables的简单示例,很多都做了详细的注释说明:

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
<?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="http://net08118.blog.163.com/blog/./style/datatable/js/jquery.js"></script>
<script type="text/javascript" src="http://net08118.blog.163.com/blog/./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="http://net08118.blog.163.com/blog/./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="http://net08118.blog.163.com/blog/./style/datatable/images/details_open.png";
				oTable.fnClose( nTr );
			}
			else
			{
				this.src="http://net08118.blog.163.com/blog/./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>
  评论这张
 
阅读(566)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017