首页 > 代码库 > dataTables 使用整理
dataTables 使用整理
官方网站：http://www.datatables.net/
简介：DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。
主要特点：
自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过CSS定制样式
支持隐藏列
易用
可扩展性和灵活性
国际化
动态创建表格
免费的
引入文件：
@import "css/demo_page.css";
@import "css/demo_table.css";
$(document).ready( function () {
$(‘#example‘).dataTable( );
});
body内数据表格必备结构：thead tbody tboot ;
基本参数设置：
$(document).ready(function(){
$(‘#example‘).dataTable({
"sScrollX": "100%", //表格的宽度
"sScrollXInner": "110%", //表格的内容宽度
"bScrollCollapse": true, //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)
"bPaginate": true, //是否显示分页
"bLengthChange": true, //每页显示的记录数
"bFilter": true, //搜索栏
"bSort": true, //是否支持排序功能
"bInfo": true, //显示表格信息
"bAutoWidth": false, //自适应宽度
"aaSorting": [[1, "asc"]], //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
"aoColumns": [
null,
null,
{
"bVisible": true, //不可见
"bSearchable": false, //参与搜索
},
null,
null
], //列设置，表有几列，数组就有几项
"bStateSave": true, //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
"sPaginationType": "full_numbers", //分页，一共两种样式，full_numbers和two_button(默认)
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到任何相关数据",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoEmtpy": "找不到相关数据",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
"sProcessing": "正在加载中...",
"sSearch": "搜索",
"sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
}
}, //多语言配置
"bJQueryUI": false, //可以添加 jqury的ui theme 需要添加css
"aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条", "每页25条", "每页50条", "显示所有数据", "不显示数据"]] //设置每页显示记录的下拉菜单
});
});
分组实例解释一些：
bAutoWidth
是否启用自动适应列宽
默认值：True
示例代码：
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bAutoWidth": false
} );
} );
bDeferRender
是否启用延迟加载：当你使用AJAX数据源时，可以提升速度。
默认值：False
示例代码：
$(document).ready(function() {
var oTable = $(‘#example‘).dataTable( {
"sAjaxSource": "sources/arrays.txt",
"bDeferRender": true
} );
} );
bFilter
是否启用内置搜索功能：可以跨列搜索。
默认值：True
示例代码：
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bFilter": false
} );
} );
bInfo
是否显示表格相关信息：例如翻页信息等。
默认值：True
示例代码：
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bInfo": false
} );
} );
bJQueryUI
是否启用 jQuery UI 皮肤插件支持
默认值:False
示例代码：
$(document).ready( function() {
$(‘#example‘).dataTable( {
"bJQueryUI": true
} );
} );
bLengthChange
是否允许用户，在下拉列表自定义选择分页大小(10, 25, 50 and 100),需要分页支持
默认值：True
示例代码：
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bLengthChange": false
} );
} );
bPaginate
是否开启分页
默认值：Ture
示例代码:
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bPaginate": false
} );
} );
bProcessing
是否启用进度显示，进度条等等，对处理大量数据很有用处。
默认值：false
示例代码：
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bProcessing": true
} );
} );
bScrollInfinite
是否开启内置滚动条，并且显示所有数据
默认值：fasle
示例代码：
$(document).ready(function() {
$(‘#example‘).dataTable( {
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px"
} );
} );
bServerSide
是否启用服务器处理数据源，必须sAjaxSource指明数据源位置
默认值：False
示例代码：
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bServerSide": true,
"sAjaxSource": "xhr.php"
} );
} );
bSort
是否开启列排序功能，如果想禁用某一列排序，可以在每列设置使用bSortable参数
默认值：True
示例代码：
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bSort": false
} );
} );
bSortClasses
不清楚是做什么用的，如果处理大量数据时，必须关闭（有人知道吗？）
默认值：False
示例代码：
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bSortClasses": false
} );
} );
bStateSave
是否开启cookies保存当前状态信息
默认值：false
示例代码：
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bStateSave": true
} );
} );
sScrollX
是否开启水平滚动条
默认值：空 （字符串类型）
示例代码：
$(document).ready(function() {
$(‘#example‘).dataTable( {
"sScrollX": "100%",
"bScrollCollapse": true
} );
} );
sScrollY
是否开启垂直滚动条，滚动条大小受限于Datatable的高度大小
默认值：空 （字符串类型）
示例代码：
$(document).ready(function() {
$(‘#example‘).dataTable( {
"sScrollY": "200px",
"bPaginate": false
} );
} );
分页
bPaginite:true;是否启用分页功能
sPaginationType:two_button 或者full_numbers 分页风格
sFirst:告诉他第一页怎么写
sLast:告诉他最后一页怎么写
sNext:告诉他下一页怎么写
sPrevious:告诉他上一页怎么写
语言
"sInfo":"共_TOTAL_页 第_START_到_END_页",
"sEmptyTable":"没有数据"
"sInfoFiltered":"从_MAX_条记录中搜索",
"sInfoPostFix": " 底边栏的静态信息",
"sInfoThousands": "我靠",//格式化信息用的
"sLengthMenu":"显示
条信息"
"sSearch":"搜索"
基本的命令
aaSorting:参数是个数组 [[],[]]单独定义每一列的排序方式
aaSortingFixed:锁定某一列的排序方式 用户不能改变
iDisplayLength:规定每一页的显示数目
aLengthMenu:[[两个数组要一样],[真正显示的是这个数组中的内容 最后一个是”all”]]
bAutoWidth:自动调整列宽
bDestroy:好比重新部署
bFilter:是否启用过滤器
bInfo:是否启用底边信息栏
bLengthChange:就是是否启用上面那个可以方便显示几页的下拉框
bProcessing:表格在处理数据时是否要显示信息
sProcessing:定义表格在处理数据时要显示的信息
bScrollAutoCss:是否允许显示滚动条
sScrollY:表格的高度 不够的话用滚动条
bScrollCollapse:当设置sScrolly时 如果数据没那么高 表格是否自适应高度
bScrollInfinite:允许无限滚动 和google的图片搜索功能一样 一滚到最后就自动刷新
sScrollXInner:是个百分比 实际就是表格的宽度一样
sScrollX:也是百分比 实际就是水平方向滚动条件
bSort:是否启用排序功能
dataTables 使用整理