数据列表 datatable的应用

比眉伴天荒 2022-08-05 04:29 257阅读 0赞

**本文共四部分：官网 | 基本使用|遇到的问题|属性表**

**一：官方网站：\[http://www.datatables.net/\]**

**二：基本使用：\[http://www.guoxk.com/node/jquery-datatables\]**

jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。

对于 dataTables 来说，表格必须通过 thead 和 tbody 进行说明，table的id为“example”

1、DataTables的默认配置

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

示例：[http://www.guoxk.com/html/DataTables/Zero-configuration.html][http_www.guoxk.com_html_DataTables_Zero-configuration.html]

2、DataTables的一些基础属性配置

> "bPaginate": true, //翻页功能  
> "bLengthChange": true, //改变每页显示数据数量  
> "bFilter": true, //过滤功能  
> "bSort": false, //排序功能  
> "bInfo": true,//页脚信息（共多少条记录，当前显示第几页从21到40条之类的信息）  
> "bAutoWidth": true//自动宽度

[![datatables][]][datatables 1]

示例：[http://www.guoxk.com/html/DataTables/Feature-enablement.html][http_www.guoxk.com_html_DataTables_Feature-enablement.html]

3、数据排序

> $(document).ready(function() \{  
> $('\#example').dataTable( \{  
> "aaSorting": \[  
> \[ 4, "desc" \]  
> \]  
> \} );  
> \} );

从第0列开始，以第4列倒序排列

示例：[http://www.guoxk.com/html/DataTables/Sorting-data.html][http_www.guoxk.com_html_DataTables_Sorting-data.html]

4、多列排序

示例：[http://www.guoxk.com/html/DataTables/Multi-column-sorting.html][http_www.guoxk.com_html_DataTables_Multi-column-sorting.html]

5、隐藏某些列（注意对应的checkbox应该是不选中的状态，顺序从0开始包括任意显示内容，复选框+序号+从数据中读取的内容）

> $(document).ready(function() \{  
> $('\#example').dataTable( \{  
> "aoColumnDefs": \[  
> \{ "bSearchable": false, "bVisible": false, "aTargets": \[ 2 \] \},  
> \{ "bVisible": false, "aTargets": \[ 3 \] \}  
> \] \} );  
> \} );

示例：[http://www.guoxk.com/html/DataTables/Hidden-columns.html][http_www.guoxk.com_html_DataTables_Hidden-columns.html]

6、改变页面上元素的位置

> $(document).ready(function() \{ 
> $('\#example').dataTable( \{ 
> "sDom": '<"top"fli>rt<"bottom"p><"clear">' 
> \} ); 
> \} ); 
> //l- 每页显示数量 
> //f - 过滤输入 
> //t - 表单Table 
> //i - 信息 
> //p - 翻页 
> //r - pRocessing 
> //< and > - div elements 
> //<"class" and > - div with a class 
> //Examples: <"wrapper"flipt>, <lf<t>ip>
> 
> "sDom": "<'row-fluid'<'span2'<'div\_fxSj\_start'>><'span2'<'div\_fxSj\_end'>><'span2'<'div\_pznr'>><'span2'<'div\_yip'>>>" 
> \+"<'row-fluid'<'span2'<'div\_ydk'>><'span2'<'div\_mdip'>><'span2'<'div\_mddk'>><'span4'<'div\_search'>>>" 
> \+"<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>" 
> 
> 
> 上述为几个查询条件和查询条件

示例：[http://www.guoxk.com/html/DataTables/DOM-positioning.html][http_www.guoxk.com_html_DataTables_DOM-positioning.html]

7、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。

> $(document).ready(function() \{  
> $('\#example').dataTable( \{  
> "bStateSave": true  
> \} );  
> \} );

示例：[http://www.guoxk.com/html/DataTables/State-saving.html][http_www.guoxk.com_html_DataTables_State-saving.html]

8、显示数字的翻页样式

> $(document).ready(function() \{  
> $('\#example').dataTable( \{  
> "sPaginationType": "full\_numbers"  
> \} );  
> \} );

示例：[http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html][http_www.guoxk.com_html_DataTables_Alternative-pagination-styles.html]

9、水平限制宽度

> $(document).ready(function() \{  
> $('\#example').dataTable( \{  
> "sScrollX": "100%",  
> "sScrollXInner": "110%",  
> "bScrollCollapse": true  
> \} );  
> \} );

示例：[http://www.guoxk.com/html/DataTables/Horizontal.html][http_www.guoxk.com_html_DataTables_Horizontal.html]

10、垂直限制高度

示例：[http://www.guoxk.com/html/DataTables/Vertical.html][http_www.guoxk.com_html_DataTables_Vertical.html]

11、水平和垂直两个方向共同限制

示例：[http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html][http_www.guoxk.com_html_DataTables_HorizontalVerticalBoth.html]

12、改变语言

> $(document).ready(function() \{ 
> $('\#example').dataTable( \{ 
> "oLanguage": \{ 
> "sLengthMenu": "每页显示 \_MENU\_ 条记录", 
> "sZeroRecords": "抱歉， 没有找到", 
> "sInfo": "从 \_START\_ 到 \_END\_ /共 \_TOTAL\_ 条数据", 
> "sInfoEmpty": "没有数据", 
> "sInfoFiltered": "(从 \_MAX\_ 条数据中检索)", 
> "oPaginate": \{ 
> "sFirst": "首页", 
> "sPrevious": "前一页", 
> "sNext": "后一页", 
> "sLast": "尾页" 
> \}, 
> "sZeroRecords": "没有检索到数据", 
> "sProcessing": "<img src='./loading.gif' />" 
> \} 
> \} ); 
> \} );

示例：[http://www.guoxk.com/html/DataTables/Change-language-information.html][http_www.guoxk.com_html_DataTables_Change-language-information.html]

13、click事件

示例：[http://www.guoxk.com/html/DataTables/event-click.html][http_www.guoxk.com_html_DataTables_event-click.html]

14/配合使用tooltip插件

示例：[http://www.guoxk.com/html/DataTables/tooltip.html][http_www.guoxk.com_html_DataTables_tooltip.html]

15、定义每页显示数据数量

> $(document).ready(function() \{  
> $('\#example').dataTable( \{  
> "aLengthMenu": \[\[10, 25, 50, -1\], \[10, 25, 50, "All"\]\]  
> \} );  
> \} );

示例：[http://www.guoxk.com/html/DataTables/length\_menu.html][http_www.guoxk.com_html_DataTables_length_menu.html]

16、row callback

示例：[http://www.guoxk.com/html/DataTables/RowCallback.html][http_www.guoxk.com_html_DataTables_RowCallback.html]

最后一列的值如果为“A”则加粗显示

17、排序控制

> $(document).ready(function() \{  
> $('\#example').dataTable( \{  
> "aoColumns": \[  
> null,  
> \{ "asSorting": \[ "asc" \] \},  
> \{ "asSorting": \[ "desc", "asc", "asc" \] \},  
> \{ "asSorting": \[ \] \},  
> \{ "asSorting": \[ \] \}  
> \]  
> \} );  
> \} );

示例：[http://www.guoxk.com/html/DataTables/sort.html][http_www.guoxk.com_html_DataTables_sort.html]  
说明：第一列点击按默认情况排序，第二列点击已顺序排列，第三列点击一次倒序，二三次顺序，第四五列点击不实现排序

18、从配置文件中读取语言包

> $(document).ready(function() \{  
> $('\#example').dataTable( \{  
> "oLanguage": \{  
> "sUrl": "cn.txt"  
> \}  
> \} );  
> \} );

19、是用ajax源

> $(document).ready(function() \{  
> $('\#example').dataTable( \{  
> "bProcessing": true,  
> "sAjaxSource": './arrays.txt'  
> \} );  
> \} );

示例：[http://www.guoxk.com/html/DataTables/ajax.html][http_www.guoxk.com_html_DataTables_ajax.html]

20、使用ajax，在服务器端整理数据

> $(document).ready(function() \{  
> $('\#example').dataTable( \{  
> "bProcessing": true,  
> "bServerSide": true,  
> "sPaginationType": "full\_numbers",
> 
> "sAjaxSource": "./server\_processing.php",  
> /\*如果加上下面这段内容，则使用post方式传递数据  
> "fnServerData": function ( sSource, aoData, fnCallback ) \{  
> $.ajax( \{  
> "dataType": 'json',  
> "type": "POST",  
> "url": sSource,  
> "data": aoData,  
> "success": fnCallback  
> \} );  
> \}\*/  
> "oLanguage": \{  
> "sUrl": "cn.txt"  
> \},  
> "aoColumns": \[  
> \{ "sName": "platform" \},  
> \{ "sName": "version" \},  
> \{ "sName": "engine" \},  
> \{ "sName": "browser" \},  
> \{ "sName": "grade" \}  
> \]//$\_GET\['sColumns'\]将接收到aoColumns传递数据  
> \} );  
> \} );

示例：[http://www.guoxk.com/html/DataTables/ajax-serverSide.html][http_www.guoxk.com_html_DataTables_ajax-serverSide.html]

21、为每行加载id和class

服务器端返回数据的格式：

> \{  
> "DT\_RowId": "row\_8",  
> "DT\_RowClass": "gradeA",  
> "0": "Gecko",  
> "1": "Firefox 1.5",  
> "2": "Win 98+ / OSX.2+",  
> "3": "1.8",  
> "4": "A"  
> \},

示例：[http://www.guoxk.com/html/DataTables/add\_id\_class.html][http_www.guoxk.com_html_DataTables_add_id_class.html]

22、为每行显示细节，点击行开头的“+”号展开细节显示

示例：[http://www.guoxk.com/html/DataTables/with-row-information.html][http_www.guoxk.com_html_DataTables_with-row-information.html]

[![showdetails][]][showdetails 1]

23、选择多行

示例：[http://www.guoxk.com/html/DataTables/selectRows.html][http_www.guoxk.com_html_DataTables_selectRows.html]

22、集成jQuery插件jEditable

示例：[http://www.guoxk.com/html/DataTables/jEditable-integration.html][http_www.guoxk.com_html_DataTables_jEditable-integration.html]

示例打包下载：[http://www.guoxk.com/html/DataTables/DataTables.rar][http_www.guoxk.com_html_DataTables_DataTables.rar]

**23、为列充信赋值**

**"fnCreatedRow":function(nRow,aData,iDataIndex)\{  
if(oTable.fnSettings().aoColumns\[0\].bVisible)\{  
$('td:eq(0)',nRow).html(iDataIndex+1);//为第一个单元格增加序号  
\}  
\}**

**三、遇到的问题**

3.1“Cannot reinitialise DataTable.  
To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy ”

解决办法：http://blog.csdn.net/mickey\_miki/article/details/8239185

3.2 排序时指定某列不可排序

1.  $(".datatable").dataTable( \{  
2.          "aoColumnDefs": \[ \{ "bSortable": **false**, "aTargets": \[ 0 \] \}\]  
3.      \});

注意： "bSort": true, //排序功能 要注释掉

3.3 确定选择每页展示个数列表和默认每页展示个数设置

**\[javascript\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain]

1.  "aLengthMenu": \[\[4, 10, 20, -1\], \[4, 10, 20, "所有"\]\],  
2.  "iDisplayLength":4

**四、属性表**

<table style="color:rgb(51,51,51); font-family:Arial; font-size:14px; line-height:26px; text-align:left"> 
 <tbody> 
 <tr> 
 <td> 属性名称 </td> 
 <td> 取值局限 </td> 
 <td> 申明 </td> 
 </tr> 
 <tr> 
 <td> bAutoWidth </td> 
 <td> true or false， default true </td> 
 <td> 是否主动策画表格各列宽度 </td> 
 </tr> 
 <tr> 
 <td> bDeferRender </td> 
 <td> true or false， default false </td> 
 <td> 用于衬着的一个参数 </td> 
 </tr> 
 <tr> 
 <td> bFilter </td> 
 <td> true or false， default true </td> 
 <td> 开关，是否启用客户端过滤功能 </td> 
 </tr> 
 <tr> 
 <td> bInfo </td> 
 <td> true or false， default true </td> 
 <td> 开关，是否显示表格的一些信息 </td> 
 </tr> 
 <tr> 
 <td> bJQueryUI </td> 
 <td> true or false， default false </td> 
 <td> 是否应用jquery ui themeroller的风格 </td> 
 </tr> 
 <tr> 
 <td> bLengthChange </td> 
 <td> true or false， default true </td> 
 <td> 开关，是否显示一个每页长度的选择条（须要分页器支撑） </td> 
 </tr> 
 <tr> 
 <td> bPaginate </td> 
 <td> true or false， default true </td> 
 <td> 开关，是否显示（应用）分页器 </td> 
 </tr> 
 <tr> 
 <td> bProcessing </td> 
 <td> true or false， defualt false </td> 
 <td> 开关，以指定当正在处理惩罚数据的时辰，是否显示“正在处理惩罚”这个提示信息 </td> 
 </tr> 
 <tr> 
 <td> bScrollInfinite </td> 
 <td> true or false， default false </td> 
 <td> 开关，以指定是否无穷迁移转变（与sScrollY共同应用），在大数据量的时辰很有效。当这个标记为true的时辰，分页器就默认封闭 </td> 
 </tr> 
 <tr> 
 <td> bSort </td> 
 <td> true or false， default true </td> 
 <td> 开关，是否让各列具有按列排序功能 </td> 
 </tr> 
 <tr> 
 <td> bSortClasses </td> 
 <td> true or false， default true </td> 
 <td> 开关，指定当当前列在排序时，是否增长classes ""sorting_1""， ""sorting_2"" and ""sorting_3""，打开后，在处理惩罚大数据时，机能有所丧失 </td> 
 </tr> 
 <tr> 
 <td> bStateSave </td> 
 <td> true or false， default false </td> 
 <td> 开关，是否打开客户端状况记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或从头打开浏览器，之前的状况都是保存下来的 </td> 
 </tr> 
 <tr> 
 <td> sScrollX </td> 
 <td> ""disabled"" or? ""100％""?类似的字符串 </td> 
 <td> 是否开启程度迁移转变，以及指定迁移转变区域大小 </td> 
 </tr> 
 <tr> 
 <td> sScrollY </td> 
 <td> ""disabled"" or ""200px""?类似的字符串 </td> 
 <td> 是否开启垂直迁移转变，以及指定迁移转变区域大小 </td> 
 </tr> 
 <tr> 
 <td> -- </td> 
 <td> -- </td> 
 <td> -- </td> 
 </tr> 
 <tr> 
 <td> 选项 </td> 
 <td> ? </td> 
 <td> ? </td> 
 </tr> 
 <tr> 
 <td> aaSorting </td> 
 <td> array array[int，string]，如[]， [[0，""asc""]， [0，""desc""]] </td> 
 <td> 指定按多列数据排序的根据 </td> 
 </tr> 
 <tr> 
 <td> aaSortingFixed </td> 
 <td> 同上 </td> 
 <td> 同上。独一不合点是不克不及被用户的自定义设备冲突 </td> 
 </tr> 
 <tr> 
 <td> aLengthMenu </td> 
 <td> default [10， 25， 50， 100]，可认为一维数组，也可为二维数组，比如：[[10， 25， 50， -1]， [10， 25， 50， "All"]] </td> 
 <td> 这个为选择每页的条目数，当应用一个二维数组时，二维层面只能有两个元素，第一个为显示每页条目数的选项，第二个是关于这些选项的申明 </td> 
 </tr> 
 <tr> 
 <td> aoSearchCols </td> 
 <td> default null，?类似：[null， {"sSearch": "My filter"}， null，{"sSearch": "^[0-9]"， "bEscapeRegex": false}] </td> 
 <td> 给每个列零丁定义其初始化搜刮列表特点（这一块还没搞懂） </td> 
 </tr> 
 <tr> 
 <td> asStripClasses </td> 
 <td> default [""odd""， ""even""]，?比如[""strip1""， ""strip2""， ""strip3""] </td> 
 <td> 指定要被应用到各行的class风格，会主动轮回 </td> 
 </tr> 
 <tr> 
 <td> bDestroy </td> 
 <td> true or false， default false </td> 
 <td> 用于当要在同一个元素上履行新的dataTable绑按时，将之前的那个数据对象清除掉，换以新的对象设置 </td> 
 </tr> 
 <tr> 
 <td> bRetrieve </td> 
 <td> true or false， default false </td> 
 <td> 用于指明当履行dataTable绑按时，是否返回DataTable对象 </td> 
 </tr> 
 <tr> 
 <td> bScrollCollapse </td> 
 <td> true or false， default false </td> 
 <td> 指定恰当的时辰缩起迁移转变视图 </td> 
 </tr> 
 <tr> 
 <td> bSortCellsTop </td> 
 <td> true or false， default false </td> 
 <td> （未知的东东） </td> 
 </tr> 
 <tr> 
 <td> iCookieDuration </td> 
 <td> 整数，默认7200，单位为秒 </td> 
 <td> 指定用于存储客户端信息到cookie中的时候长度，跨越这个时候后，主动过期 </td> 
 </tr> 
 <tr> 
 <td> iDeferLoading </td> 
 <td> 整数，默认为null </td> 
 <td> 延迟加载，它的参数为要加载条目标数量，凡是与bServerSide，sAjaxSource等共同应用 </td> 
 </tr> 
 <tr> 
 <td> iDisplayLength </td> 
 <td> 整数，默认为10 </td> 
 <td> 用于指定一屏显示的条数，需开启分页器 </td> 
 </tr> 
 <tr> 
 <td> iDisplayStart </td> 
 <td> 整数，默认为0 </td> 
 <td> 用于指定从哪一条数据开端显示到表格中去 </td> 
 </tr> 
 <tr> 
 <td> iScrollLoadGap </td> 
 <td> 整数，默认为100 </td> 
 <td> 用于指定当DataTable设置为迁移转变时，最多可以一屏显示几许条数据 </td> 
 </tr> 
 <tr> 
 <td> oSearch </td> 
 <td> 默认{ "sSearch": ""， "bRegex": false， "bSmart": true } </td> 
 <td> 又是初始时指定搜刮参数相干的，有点错杂，没搞懂今朝 </td> 
 </tr> 
 <tr> 
 <td> sAjaxDataProp </td> 
 <td> 字符串，default ""aaData"" </td> 
 <td> 指定当从办事端获取表格数据时，数据项应用的名字 </td> 
 </tr> 
 <tr> 
 <td> sAjaxSource </td> 
 <td> URL字符串，default null </td> 
 <td> 指定要从哪个URL获取数据 </td> 
 </tr> 
 <tr> 
 <td> sCookiePrefix </td> 
 <td> 字符串，default ""SpryMedia_DataTables_"" </td> 
 <td> 当打开状况存储特点后，用于指定存储在cookies中的字符串的前缀名字 </td> 
 </tr> 
 <tr> 
 <td> sDom </td> 
 <td> default lfrtip （when bJQueryUI is false） or &lt;"H"lfr&gt;t&lt;"F"ip&gt; （when bJQueryUI is true） </td> 
 <td> 这是用于定义DataTable布局的一个强大的属性，另开专门文档来补充申明吧 </td> 
 </tr> 
 <tr> 
 <td> sPaginationType </td> 
 <td> ""full_numbers"" or ""two_button""， default ""two_button"" </td> 
 <td> 用于指定分页器风格 </td> 
 </tr> 
 <tr> 
 <td> sScrollXInner </td> 
 <td> string default ""disabled"" </td> 
 <td> 又是程度迁移转变相干的，没搞懂啥意思 </td> 
 </tr> 
 </tbody> 
</table>

[http_www.guoxk.com_html_DataTables_Zero-configuration.html]: http://www.guoxk.com/html/DataTables/Zero-configuration.html
[datatables]: http://www.guoxk.com/wp-content/uploads/2011/11/datatables.png
[datatables 1]: http://www.guoxk.com/node/jquery-datatables/datatables
[http_www.guoxk.com_html_DataTables_Feature-enablement.html]: http://www.guoxk.com/html/DataTables/Feature-enablement.html
[http_www.guoxk.com_html_DataTables_Sorting-data.html]: http://www.guoxk.com/html/DataTables/Sorting-data.html
[http_www.guoxk.com_html_DataTables_Multi-column-sorting.html]: http://www.guoxk.com/html/DataTables/Multi-column-sorting.html
[http_www.guoxk.com_html_DataTables_Hidden-columns.html]: http://www.guoxk.com/html/DataTables/Hidden-columns.html
[http_www.guoxk.com_html_DataTables_DOM-positioning.html]: http://www.guoxk.com/html/DataTables/DOM-positioning.html
[http_www.guoxk.com_html_DataTables_State-saving.html]: http://www.guoxk.com/html/DataTables/State-saving.html
[http_www.guoxk.com_html_DataTables_Alternative-pagination-styles.html]: http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html
[http_www.guoxk.com_html_DataTables_Horizontal.html]: http://www.guoxk.com/html/DataTables/Horizontal.html
[http_www.guoxk.com_html_DataTables_Vertical.html]: http://www.guoxk.com/html/DataTables/Vertical.html
[http_www.guoxk.com_html_DataTables_HorizontalVerticalBoth.html]: http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html
[http_www.guoxk.com_html_DataTables_Change-language-information.html]: http://www.guoxk.com/html/DataTables/Change-language-information.html
[http_www.guoxk.com_html_DataTables_event-click.html]: http://www.guoxk.com/html/DataTables/event-click.html
[http_www.guoxk.com_html_DataTables_tooltip.html]: http://www.guoxk.com/html/DataTables/tooltip.html
[http_www.guoxk.com_html_DataTables_length_menu.html]: http://www.guoxk.com/html/DataTables/length_menu.html
[http_www.guoxk.com_html_DataTables_RowCallback.html]: http://www.guoxk.com/html/DataTables/RowCallback.html
[http_www.guoxk.com_html_DataTables_sort.html]: http://www.guoxk.com/html/DataTables/sort.html
[http_www.guoxk.com_html_DataTables_ajax.html]: http://www.guoxk.com/html/DataTables/ajax.html
[http_www.guoxk.com_html_DataTables_ajax-serverSide.html]: http://www.guoxk.com/html/DataTables/ajax-serverSide.html
[http_www.guoxk.com_html_DataTables_add_id_class.html]: http://www.guoxk.com/html/DataTables/add_id_class.html
[http_www.guoxk.com_html_DataTables_with-row-information.html]: http://www.guoxk.com/html/DataTables/with-row-information.html
[showdetails]: http://www.guoxk.com/wp-content/uploads/2011/11/showdetails.png
[showdetails 1]: http://www.guoxk.com/node/jquery-datatables/showdetails
[http_www.guoxk.com_html_DataTables_selectRows.html]: http://www.guoxk.com/html/DataTables/selectRows.html
[http_www.guoxk.com_html_DataTables_jEditable-integration.html]: http://www.guoxk.com/html/DataTables/jEditable-integration.html
[http_www.guoxk.com_html_DataTables_DataTables.rar]: http://www.guoxk.com/html/DataTables/DataTables.rar
[view plain]: http://blog.csdn.net/mickey_miki/article/details/8240477#