Datatables中文API——基本参数（2）

最新推荐文章于 2025-05-09 15:11:09 发布

54341

最新推荐文章于 2025-05-09 15:11:09 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： datatables 文章标签： datatables api function string xmlhttprequest

本文链接：https://blog.youkuaiyun.com/keithssy/article/details/8004177

datatables 专栏收录该内容

6 篇文章

订阅专栏

本文详细解析了 DataTables 的核心功能与配置选项，包括 bDestroy、bRetrieve、bScrollAutoCss、bScrollCollapse 等，旨在帮助开发者高效地利用 DataTables 实现数据展示与交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

更多datatables在http://dt.thxopen.com/ 欢迎大家来做客

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>'