最近 寒风用到一个 jquery 分页 插件，刚拿到手时完全摸不着头脑，网上的中文资料几乎木有，于是花了点时间研究了一下，将以下分享出来，可以说是一个简单的 datatables的中文手册了。可能文章会很长，但都是 寒风一个字一个字打出来的，都经过实践了滴，嘿嘿~
以下一些参数等基本是按照官方示例来的，比较多，还木有完全弄完，以后有机会再更新。
简介：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="./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. 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": "<img src=’./loading.gif’ />",
"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="./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 = "./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' );
}
} ); |
值得注意的是，如果加入了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="./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> |
最终效果图如下：
文档点击打开链接
官方文档点击打开链接