DataTables 控件使用和心得 (2) - 参数Options

什么是DataTables参数(Options)

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

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

});

官方文档地址: http://datatables.net/reference/option/

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

功能参数(Features)

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

 

 

数据参数(Data)

参数名	说明	参考值
data	以Javascript数组对象方式设定列表显示数据	数组对象
ajax	String模式: 直接传入一个string做为远程ajax请求路径	String
	对象模式: 支持JQuery.ajax函数的参数设置,支持type,url等标准参数. 例如: $('#example').dataTable( { "ajax": {     "url": url,     "type": "POST"    } } );	JQuery ajax 函数对应参数
ajax.data	和标准JQuery.ajax的data参数做用相似,但效果有所不一样.仅当serverSide参数为true的时候,参数属性才有意义,当serverSide开启,DataTables组件会自行封装一个信息类发送给服务端,而ajax.data仅仅是对这个信息类进行调整和添加.   添加方式, ajax.data能够直接赋值一个对象,这个对象的属性会添加到原信息类里面去一块儿发送到服务端.例如:   $('#example').dataTable( {     "ajax": {       "url": "data.json",       "data": {           "user_id": 451     }   } } );   另一种选择是传入一个方法,方法的参数就是当前发送到服务器的信息类,在方法中能够修改这个信息类.   $('#example').dataTable( {   "ajax": {     "url": "data.json",     "data": function ( d ) {         d.extra_search = $('#extra').val();     }   } } );	对象或者方法
ajax.dataSrc	定义服务器返回对象里面保存数据的属性名称,默认为data,也便是说,在返回的Json数据中,全部列表数据保存在data属性中,这个属性不太建议修改.

配置参数(Options)

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

列定义参数(Columns)

参数名	说明	参考值	默认值
columns	列的初始状态的定义,该参数一个是对象数组,每个对象元素定义一个列.注意,不需定义的列也必须以null占位,好比: "columns": [     {   "searchable": false },     null, null  ]	Array	无
columnDefs	和columns设置很是相似,但能够经过targets属性能够根据灵活的选择须要设定的列.比columns更加灵活.好比: "columnDefs": [ {         "targets": 0,         "searchable": false } ] targets能够有多种写法: 0或者正整数(可用数组): 表示正向列的索引 负数(可用数组): 表示反向列的索引 字符串: 匹配th的class来选择列. "_all":   全部列,也是默认值.
columns.data	列的数据名,对应数据里面的属性名	String	无
columns.name	给列设置独立的名称,目前看意义不大	String	无
columns.orderable	设置列是否容许排序	Boolean	true
columns.searchable	设置列是否容许过滤	Boolean	true
columns.type	经过设置列的类型让控件在排序和过滤这个列是能更好的处理这个列的数据,好比日期,货币等.具体种类不少请参考这里: http://datatables.net/reference/option/columns.type	String	无
columns.visible	设置列的可见性,true为显示	Boolean	true
columns.width	强行设置列的宽度,支持数字和任何CSS写法,好比20%.	String	无
columns.render	很是有用的函数,自定义列的内容.该属性比较常见的用法是函数用法,经过这个函数能够自定义改造列的任何内容,若是要在列中显示比较复杂的内容,这是一个比较好的选择.好比在列中加入功能按钮. 例如: "render": function ( data, type, row,   meta ) {       return   '<a href="'+data+'">Download</a>'; } 4个属性的意思是: data : 当前单元格的数据 type: 当前列的类型 row: 当前行完整的数据对象 meta: 为一个子对象,包含3个属性    row: 当前行的索引    col: 当前列的索引    settings: 当前DataTables控件的setttings对象	Function	无

 

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