簡介：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> |
實現了上面絕大部分功能！以上php+datatables示例僅適用於數據量少時的情況，數據量大的情況寒風以后再專門寫博文~
最終效果圖如下：