bDestroy
:
使用传递的新的初始化对象中的属性构造一个新的表格,并替换一个匹配指定的选择器的表格,
如果没有匹配到表格,新的表格会被作为一个普通表格被构建
默认值:
false
类型:
boolean
$(document).ready( function() { $('#example').dataTable( { "sScrollY": "200px", "bPaginate": false } ); // Some time later.... $('#example').dataTable( { "bFilter": false, "bDestroy": true } ); } );
复制代码
bRetrieve
:
使用指定的选择器检索表格,注意,如果表格已经被初始化,该参数会直接返回已经被创建的对象,
并不会顾及你传递进来的初始化参数对象的变化,将该参数设置为true说明你确认已经明白这一点,
如果你需要的话,bDestroy可以用来重新初始化表格
默认值:
false
类型:
boolean
$(document).ready( function() { initTable(); tableActions(); } ); function initTable () { return $('#example').dataTable( { "sScrollY": "200px", "bPaginate": false, "bRetrieve": true } ); } function tableActions () { var oTable = initTable(); // perform API operations with oTable }
复制代码
bScrollAutoCss
:
指明DataTable中滚动的标题元素是否被允许设置内边距和外边距等
默认值:
true
类型:
boolean
$(document).ready( function() { $('#example').dataTable( { "bScrollAutoCss": false, "sScrollY": "200px" } ); } );
复制代码
bScrollCollapse
:
当垂直滚动被允许的时候,DataTable会强制表格视图在任何时候都是给定的高度(对布局有利)
不过,当把数据集过滤到十分小的时候看起来会很古怪,而且页脚会留在最下面
当结果集的高度比给定的高度小时该参数会使表格高度自适应
默认值:
false
类型:
boolean
$(document).ready( function() { $('#example').dataTable( { "sScrollY": "200", "bScrollCollapse": true } ); } );
复制代码
bSortCellsTop
:
是否允许DataTable使用顶部(默认为true)的单元格,或者底部(默认为false)的单元格,当使用复合表头的时候会有些用处
默认值:
false
类型:
boolean
$(document).ready( function() { $('#example').dataTable( { "bSortCellsTop": true } ); } );
复制代码
iCookieDuration
:
指定用于存储客户端信息到cookie中的时间长度,超过这个时间后,自动过期
默认值:
7200
(2 hours)
类型:
int
$(document).ready( function() { $('#example').dataTable( { "iCookieDuration": 60*60*24; // 一天 } ); } )
复制代码
iDeferLoading
:
当选项被开启的时候,DataTable在非加载第一次的时候不会向服务器请求数据,而是会使用页面上的已有数据(不会应用排序等),
因此在加载的时候保留一个XmlHttpRequest,iDeferLoading被用来指明需要延迟加载,而且也用来通知DataTable一个满的表格有多少条数据,
信息元素和分页会被正确保留
默认值:
null
类型:
int
// 57 records available in the table, no filtering applied $(document).ready( function() { $('#example').dataTable( { "bServerSide": true, "sAjaxSource": "scripts/server_processing.php", "iDeferLoading": 57 } ); } ); // 57 records after filtering, 100 without filtering (an initial filter applied) $(document).ready( function() { $('#example').dataTable( { "bServerSide": true, "sAjaxSource": "scripts/server_processing.php", "iDeferLoading": [ 57, 100 ], "oSearch": { "sSearch": "my_filter" } } ); } );
复制代码
iDisplayLength
:
单页显示的数据的条数,如果bLengthChange属性被开启,终端用户可以通过一个弹出菜单重写该数值
默认值:
10
类型:
int
$(document).ready( function() { $('#example').dataTable( { "iDisplayLength": 50 } ); } )
复制代码
iDisplayStart
:
当开启分页的时候,定义展示的记录的起始序号,不是页数,因此如果你每个分页有10条记录而且想从第三页开始,
需要把该参数指定为20
默认值
0
类型:
int
$(document).ready( function() { $('#example').dataTable( { "iDisplayStart": 20 } ); } )
复制代码
iScrollLoadGap
:
滚动余界是指DataTable在当前页面还有多少条数据可供滚动时自动加载新的数据,你可能希望指定一个足够大的余界,
以便滚动加载数据的操作对用户来说是平滑的,同时也不会大到加载比需要的多的多的数据
默认值:
100
类型:
int
$(document).ready( function() { $('#example').dataTable( { "bScrollInfinite": true, "bScrollCollapse": true, "sScrollY": "200px", "iScrollLoadGap": 50 } ); } );
复制代码
iTabIndex
:
默认情况下DataTable允许通过为需要键盘导航的元素添加tabindex属性来进行导航(排序、分页、过滤),
允许你通过tab键切换控制组件,使用回车键去激活他们,默认为0表示按照文档流来切换,
如果需要的话,你可以使用该参数重写切换顺序,使用-1来禁止内建的键盘导航
默认值:
0
类型:
int
$(document).ready( function() { $('#example').dataTable( { "iTabIndex": 1 } ); } );
复制代码
oSearch
:
该参数允许你在初始化的时候使用已经定义的全局过滤状态,sSearch对象必须被定义,但是所有的其它选项都是可选的,
当bRegex为true的时候,搜索字符串会被当作正则表达式,当为false(默认)的时候,会被直接当作一个字符串,
当bSmart为true的时候,DataTable会使用使用灵活过滤策略(匹配任何可能的数据),为false的时候不会这样做
$(document).ready( function() { $('#example').dataTable( { "oSearch": {"sSearch": "Initial search"} } ); } )
复制代码
sAjaxDataProp
:
当使用Ajax数据源或者服务器端处理的时候,DataTable会默认搜索aaData属性作为数据源,
该选项允许变更数据源的名称,你可以使用JavaScript的点号对象表示法去访问多级网状数据源
默认值:
aaData
类型:
string
// Get data from { "data": [...] } $(document).ready( function() { var oTable = $('#example').dataTable( { "sAjaxSource": "sources/data.txt", "sAjaxDataProp": "data" } ); } ); // Get data from { "data": { "inner": [...] } } $(document).ready( function() { var oTable = $('#example').dataTable( { "sAjaxSource": "sources/data.txt", "sAjaxDataProp": "data.inner" } ); } );
复制代码
sAjaxSource
:
该参数用来向DataTable指定加载的外部数据源(如果想使用现有的数据,请使用aData),
可以简单的提供一个可以用来获得数据url或者JSON对象,该对象必须包含aaData,作为表格的数据源
默认值:
null
类型:
string
$(document).ready( function() { $('#example').dataTable( { "sAjaxSource": "list.action" } ); } )
复制代码
sCookiePrefix
:
该参数可以用来重写DataTable默认指定的用来存储状态信息的cookie的前缀
默认值:
SpryMedia_DataTables_
类型:
string
$(document).ready( function() { $('#example').dataTable( { "sCookiePrefix": "my_datatable_" } ); } );
复制代码
sDom
:
这是用于定义DataTable布局的一个强大的属性
,包括分页,显示多少条数据和搜索,格式如下:
The following options are allowed: 'l' - Length changing 'f' - Filtering input 't' - The table! 'i' - Information 'p' - Pagination 'r' - pRocessing The following constants are allowed: 'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix') 'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix') The following syntax is expected: '<' and '>' - div elements '<"class" and '>' - div with a class '<"#id" and '>' - div with an ID Examples: '<"wrapper"flipt>' '<lf<t>ip>'
复制代码
默认值:
lfrtip
(when bJQueryUI is false)
or <"H"lfr>t<"F"ip>
(when bJQueryUI is true)
类型:
string
$(document).ready( function() { $('#example').dataTable( { "sDom": '<"top"i>rt<"bottom"flp><"clear">' } ); } );
复制代码
'<"top"i>rt<"bottom"flp><"clear">'
这段代码翻译为html就是这样子的:
<div class="top"> i </div> rt <div class="bottom"> flp </div> <div class="clear"></div>
复制代码
这样一对比起来,就容易理解多了.
Datatables之强大的sDom属性的应用
sPaginationType
:
DataTable内建了两种交互式分页策略,两个按钮和全页数,展现给终端用户不同的控制方式,
可以通过API增加策略
默认值:
two_button
类型:
string
$(document).ready( function() { $('#example').dataTable( { "sPaginationType": "full_numbers" } ); } )
复制代码
sScrollXInner
:
当横向滚动可用的时候,该属性可以用来强制DataTable的宽度比需要的更长,
比如你需要表格彼此相隔适宜,该变量可以用来使表格变大,而且强制滚动,
该该属性可以是css设置,或者一个数字(作为像素量度来使用)
默认值:
blank string - i.e. disabled
类型:
string
$(document).ready( function() { $('#example').dataTable( { "sScrollX": "100%", "sScrollXInner": "110%" } ); } );
复制代码
sServerMethod
:
设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式
默认值:
GET
类型:
string
$(document).ready( function() { $('#example').dataTable( { "bServerSide": true, "sAjaxSource": "list.action", "sServerMethod": "POST" //以post的方式提交数据 } ); } );
复制代码
更多datatables在http://dt.thxopen.com/ 欢迎大家来做客