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:是否启用排序功能