DataTables 控件使用和心得 (2) - 参数Options中文说明

Dear 丶 2022-08-18 14:10 139阅读 0赞

博客来源：[http://www.suchso.com/UIweb/jquery-DataTables-use-opertions-zhongwen-shuoming.html][http_www.suchso.com_UIweb_jquery-DataTables-use-opertions-zhongwen-shuoming.html]

在以前的文章中说起Datatable的参数一般都是英文的，今天[分享][Link 1]一下Datatable参数的中文说明，以及详细使用。

# 什么是DataTables参数(Options) #

上篇我们说了,DataTables控件的加载函数dataTable()一般都有一个对象参数,这个对象参数就是整个DataTables控件的参数(Options),通过定义这个参数中的各种属性,来灵活控制DataTable的初始效果. 样例代码如下:

$('#example'
    ).dataTable({
       “option1”:value1,
       “option2”:value2,
       …
    });

官方文档地址: [ http://datatables.net/reference/option/][http_datatables.net_reference_option]

下面是一些常用的参数列表,比较常用或者有价值的标示为绿色.

# 功能参数(Features) #

<table> 
 <tbody> 
 <tr> 
 <td> 参数名 &nbsp; &nbsp; &nbsp; </td> 
 <td> 说明 </td> 
 <td> 参考值 </td> 
 <td> 默认值 </td> 
 </tr> 
 <tr> 
 <td> autoWidth </td> 
 <td> 定义是否由控件自动控制列宽 </td> 
 <td> Boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> deferRender </td> 
 <td> 定义在render时是否仅仅render显示的dom,在显示大量数据的情况下强烈建议设为true,显示少量数据或者真翻页方案可以设为false,注意在设为true时无法通过函数获取所有行的dom对象—因为它们并不存在. </td> 
 <td> Boolean </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> info </td> 
 <td> 控制总数信息(标准界面右下角显示总数和过滤条数的控件)的显隐 </td> 
 <td> Boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> lengthChange </td> 
 <td> 控制是否能够调整每页的条数,如果设为false,标准的每页条数控制控件也会被隐藏. </td> 
 <td> Boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> ordering </td> 
 <td> 全局控制列表的所有排序功能. </td> 
 <td> Boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> paging </td> 
 <td> 全局控制列表的翻页功能,如果设为false,所有的默认翻页控件会被隐藏 </td> 
 <td> Boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> processing </td> 
 <td> 控制是否在数据加载时出现”Processing”的提示,一般在远程加载并且比较慢的情况下才会出现. 样式需要定义,否则比较丑. </td> 
 <td> Boolean </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> scrollX </td> 
 <td> 控制在列过多过宽是,是否出现水平滚动条.注意使用这个参数时最好关闭响应式<a href="http://www.suchso.com/catalog.asp?cate=1" title=" 设计" rel="nofollow">设计</a> </td> 
 <td> Boolean </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> scrollY </td> 
 <td> 定义一个高度,当列表内容超过这个高度时,显示垂直滚动条,这个高度不算表头和翻页搜索等工具条的空间.支持数字或者css写法比如: 200或者’200px’ </td> 
 <td> Number / &nbsp; String </td> 
 <td> 无 </td> 
 </tr> 
 <tr> 
 <td> searching </td> 
 <td> 控制控件的搜索功能,如果为false,控件的搜索功能被完全禁用,而且默认搜索组件会被隐藏. </td> 
 <td> Boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> serverSide </td> 
 <td> 当设为true时,列表的过滤,搜索和排序信息会传递到Server端进行处理,实现真翻页方案的必需属性.反之,所有的列表功能都在客户端计算并执行 </td> 
 <td> Boolean </td> 
 <td> false </td> 
 </tr> 
 </tbody> 
</table>

# 数据参数(Data) #

# 配置参数(Options) #

<table> 
 <tbody> 
 <tr> 
 <td> 参数名 </td> 
 <td> 说明 </td> 
 <td> 参考值 </td> 
 <td> 默认值 </td> 
 </tr> 
 <tr> 
 <td> deferLoading </td> 
 <td> 这个参数只有在ServerSide为Ture的时候才有作用,主要是针对列表已经通过HTML显示了一部分数据,而通知远程加载可以忽略这部分数据,在实际使用中这种情况并不常见. </td> 
 <td> Number &nbsp; /Array </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> destroy </td> 
 <td> 设为ture时通知dataTable函数完全重新建立一个新的控件实例,在一个页面内反复对同一个控件加载dataTable函数并且想重新建立控件时使用. </td> 
 <td> Boolean </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> displayStart </td> 
 <td> 列表初始显示的行索引,根据给出的行索引会自动翻页,比如一个每页10个的列表,那么给出20可以让其翻到第二页 </td> 
 <td> Number </td> 
 <td> 无 </td> 
 </tr> 
 <tr> 
 <td> dom </td> 
 <td> 比较复杂的配置项,简言之就是通过一个自定义的字符串来定义DataTables里面所有组件的显示,位置和显隐. 具体请详见: http://datatables.net/reference/option/dom </td> 
 <td> String </td> 
 <td> “lfrtip” </td> 
 </tr> 
 <tr> 
 <td> lengthMenu </td> 
 <td> 定义页面长度组件里面的选项. </td> 
 <td> Array </td> 
 <td> [ 10, 25, &nbsp; 50] </td> 
 </tr> 
 <tr> 
 <td> orderCellsTop </td> 
 <td> 当然表头有多层td组成的时候,必须定义哪一个td的数据用于排序,false表示底部td,true表示顶部td. 比如以下情况: &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.2&nbsp;&nbsp;&nbsp; &nbsp; true的时候排序会用2.1, false的时候排序会用2.2. </td> 
 <td> Boolean </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> orderClasses </td> 
 <td> 定义是否排序的列进行高亮显示 </td> 
 <td> Boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> order </td> 
 <td> 定义列表的初始排序设定,为一个2维数组,子数组包括2个值,列索引和排序方向(asc/desc): 例如 "order": [[ 0, 'asc' ], [ 1, 'asc' ]] </td> 
 <td> Array </td> 
 <td> [[0, 'asc']] </td> 
 </tr> 
 <tr> 
 <td> orderMulti </td> 
 <td> 控制是否支持多重排序,如果为true,可以通过shift+点击列头实现多重排序,或者通过API实现,否则禁用该功能. </td> 
 <td> Boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> orderFixed </td> 
 <td> 自定义固定的排序策略,该策略在任何排序操作中总是起效.可以通过对一个列的固定排序(可以是隐藏的列)来定义列表默认的排序策略. 数组方式,定义优先排序策略,如: "orderFixed": [ 0, 'asc' ] 该参数说明无论如何排序,永远先进行第一列的正向排序. 对象方式,可以利用关键字pre或post来定义这个规则是优先生效还是置后生效. "orderFixed": { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; "pre": [ 0, 'asc' ], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; "post": [ 1, 'asc' ] &nbsp;&nbsp;&nbsp; } </td> 
 <td> Array/Object </td> 
 <td> 无 </td> 
 </tr> 
 <tr> 
 <td> pageLength </td> 
 <td> 定义初始的页长 </td> 
 <td> Number </td> 
 <td> 10 </td> 
 </tr> 
 <tr> 
 <td> pagingType </td> 
 <td> 定义翻页组件的样式(有4个选择): simple - &nbsp;只有上一页和下一页2个按钮 simple_numbers &nbsp; – 上一页,下一页和页码 full – 首页,末页,上一页,下一页4个按钮 full_numbers &nbsp; – 全部按钮和页面 </td> 
 <td> String </td> 
 <td> simple_numbers </td> 
 </tr> 
 <tr> 
 <td> scrollCollapse </td> 
 <td> 在设置了一定的scrollY值后起效,为true时,当列表内容不足以撑满scrollY的设定值时,列表高度会自动适应内容. </td> 
 <td> Boolean </td> 
 <td> false </td> 
 </tr> 
 <tr> 
 <td> search </td> 
 <td> 定义列表的初始搜索/过滤条件 Search对象可以有以下属性: </td> 
 <td> Object </td> 
 <td> 无 </td> 
 </tr> 
 <tr> 
 <td> search.search </td> 
 <td> 过滤字符串,注意在默认设置下,所有列的数据都会参与过滤.比如当这个属性为”a”的时候,任何一个列只要包含”a”的行就会被显示.为空表示全部 </td> 
 <td> String </td> 
 <td> 无 </td> 
 </tr> 
 <tr> 
 <td> search.caseInsensitive </td> 
 <td> 搜索是是否忽略大小写,true为忽略 </td> 
 <td> Boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> search.regex </td> 
 <td> 定义搜索字符串是否为一个正则表达式 </td> 
 <td> Boolean </td> 
 <td> fasle </td> 
 </tr> 
 <tr> 
 <td> search.smart </td> 
 <td> 禁用获取启用DataTables控件内置的只能过滤算法,这个算法会把搜索字符串进行分割并只能搜索,关闭这个算法仅仅实现简单的字符串查找,false为关闭 </td> 
 <td> Boolean </td> 
 <td> true </td> 
 </tr> 
 <tr> 
 <td> searchCols </td> 
 <td> 分别定义每个列的过滤条件.该参数是一个对象数组,每个对象有2个属性: search: 搜索字符串 escapeRegex: &nbsp; 是否是正则表达式 注意不需要设置过滤的列也需要用null占位,比如: "searchCols": [ &nbsp;&nbsp;&nbsp; null, &nbsp;&nbsp;&nbsp; { &nbsp; "search": "My filter" }, &nbsp;&nbsp;&nbsp; null, &nbsp;&nbsp;&nbsp; { &nbsp; "search": "^[0-9]", "escapeRegex": false } &nbsp; ] </td> 
 <td> Array </td> 
 <td> 无 </td> 
 </tr> 
 <tr> 
 <td> stripeClasses </td> 
 <td> 定义一个字符串数组,在显示行的时候依次使用里面的字符串作为行的class </td> 
 <td> Array </td> 
 <td> ‘odd’ &amp; ‘even’ </td> 
 </tr> 
 </tbody> 
</table>

# 列定义参数(Columns) #

**可以看到,DataTables的Options设置还是比较全面和丰富的,当然Options仅仅能在控件初始化的时候对控件进行控制和影响,如果要在控件使用过程中对它进行控制和变化,就需要用到DataTables的函数库(API).这个我们将在下一篇文章中讨论.**

[http_www.suchso.com_UIweb_jquery-DataTables-use-opertions-zhongwen-shuoming.html]: http://www.suchso.com/UIweb/jquery-DataTables-use-opertions-zhongwen-shuoming.html
[Link 1]: http://www.suchso.com
[http_datatables.net_reference_option]: http://datatables.net/reference/option/