Datatables简单使用

貌似很久没有更新博客了，实在太忙。。。
最近 寒风 用到一个 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

[html]  view plain  copy <style type="text/css" title="currentStyle">       @import "./style/data<span class="wp_keywordlink_affiliate"><a href="http://www.coolwinds.cn/article/tag/table" title="查看 table 中的全部文章" target="_blank">table</a></span>/css/demo_page.css";       @import "./style/data<span class="wp_keywordlink_affiliate"><a href="http://www.coolwinds.cn/article/tag/table" title="查看 table 中的全部文章" target="_blank">table</a></span>/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

[html]  view plain  copy $(document).ready(function() {   $('#example').dataTable();   } );

这个是不进行参数配置，效果如下图：

2. 进行基本参数配置

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

1 2 3 4 5 6

[html]  view plain  copy "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	[html]  view plain  copy "aaSorting": [[ 4, "desc" ]],//设置第5个元素为默认排序

4. 多个datatable

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

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

1	[html]  view plain  copy $('.example').dataTable(

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

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

1 2 3 4

[html]  view plain  copy "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	[html]  view plain  copy "sDom": '<"top"i>rt<"bottom"flp><"clear">'

表示的html为：

1 2 3 4 5 6 7 8 9 10 11 12 13

[html]  view plain  copy <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	[html]  view plain  copy "bStateSave": true

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

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

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

1	[html]  view plain  copy "sPaginationType": "full_numbers"

9. x轴宽度限制

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

1 2 3

[html]  view plain  copy "sScrollX": "100%",   "sScrollXInner": "110%",   "bScrollCollapse": true

用的很少

10. y轴高度限制

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

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

11. x轴、y轴均限制

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

1 2 3

[html]  view plain  copy "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	[html]  view plain  copy @import "./style/datatable/css/demo_table.css";

替换为：

1 2 3

[html]  view plain  copy @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	[html]  view plain  copy @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

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

也可以直接指定语言包，txt文件：

1	[html]  view plain  copy "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

[html]  view plain  copy 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

[html]  view plain  copy <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

[html]  view plain  copy /* 构造每一行详情的函数 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

[html]  view plain  copy /*显示每一行详情用_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

[html]  view plain  copy /*加入展开，收缩每一行详情按钮用*/   $('#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]  view plain  copy <span style="color:#000000;font-weight:bold;"><?php</span>    <span style="color:#000088;">$mysqli</span><span style="color:#339933;">=</span><span style="color:#000000;font-weight:bold;">new</span> mysqli<span style="color:#009900;">(</span><span style="color:#0000ff;">"localhost"</span><span style="color:#339933;">,</span><span style="color:#0000ff;">"root"</span><span style="color:#339933;">,</span><span style="color:#0000ff;">""</span><span style="color:#339933;">,</span><span style="color:#0000ff;">"database"</span><span style="color:#009900;">)</span><span style="color:#339933;">;</span>   <span style="color:#000088;">$mysqli</span><span style="color:#339933;">-></span><span style="color:#004000;">query</span><span style="color:#009900;">(</span><span style="color:#0000ff;">"SET NAMES utf8"</span><span style="color:#009900;">)</span><span style="color:#339933;">;</span>       <span style="color:#000088;">$result</span><span style="color:#339933;">=</span><span style="color:#000088;">$mysqli</span><span style="color:#339933;">-></span><span style="color:#004000;">query</span><span style="color:#009900;">(</span><span style="color:#0000ff;">"SELECT * FROM `table` limit 500"</span><span style="color:#009900;">)</span><span style="color:#339933;">;</span>   <span style="color:#b1b100;">if</span><span style="color:#009900;">(</span><span style="color:#339933;">!</span><span style="color:#000088;">$result</span><span style="color:#009900;">)</span><span style="color:#009900;">{</span>       <span style="color:#b1b100;">echo</span> <span style="color:#0000ff;">"查询出错！"</span><span style="color:#339933;">;</span>       <span style="color:#990000;">exit</span><span style="color:#339933;">;</span>   <span style="color:#009900;">}</span>   <span style="color:#000000;font-weight:bold;">?></span>   <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>   <span style="color:#000000;font-weight:bold;"><?php</span>   <span style="color:#b1b100;">while</span><span style="color:#009900;">(</span><span style="color:#000088;">$rows</span><span style="color:#339933;">=</span><span style="color:#000088;">$result</span><span style="color:#339933;">-></span><span style="color:#004000;">fetch_assoc</span><span style="color:#009900;">(</span><span style="color:#009900;">)</span><span style="color:#009900;">)</span><span style="color:#009900;">{</span>       <span style="color:#000088;">$rows</span><span style="color:#009900;">[</span><span style="color:#0000ff;">'time'</span><span style="color:#009900;">]</span><span style="color:#339933;">=</span><span style="color:#990000;">date</span><span style="color:#009900;">(</span><span style="color:#0000ff;">"Y-m-d H:i:s"</span><span style="color:#339933;">,</span><span style="color:#000088;">$rows</span><span style="color:#009900;">[</span><span style="color:#0000ff;">'time'</span><span style="color:#009900;">]</span><span style="color:#009900;">)</span><span style="color:#339933;">;</span>       <span style="color:#b1b100;">echo</span> <span style="color:#0000ff;">"       <tr>         <td><span style="color:#006699;font-weight:bold;">{$rows['ID']}</span></td>         <td><span style="color:#006699;font-weight:bold;">{$rows['time']}</span></td>         <td><span style="color:#006699;font-weight:bold;">{$rows['r_num']}</span></td>         <td><span style="color:#006699;font-weight:bold;">{$rows['r_times']}</span></td>         <td><span style="color:#006699;font-weight:bold;">{$rows['money']}</span></td>       </tr>"</span><span style="color:#339933;">;</span>   <span style="color:#009900;">}</span>   <span style="color:#000000;font-weight:bold;">?></span>   </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示例仅适用于数据量少时的情况，数据量大的情况 寒风 以后再专门写博文~

最终效果图如下：

原文链接

文档点击打开链接

官方文档点击打开链接