DataTable使用详解

/*

• sDom

• 默认值为lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)

• 该初始化属性用来指定你想把各种控制组件注入到dom节点的位置（比如你想把分页组件放到表格的顶部）

• DIV元素（带或者不带自定的class）可以添加目标样式，下列语法被使用

• 可供使用的选项

•  'l' - 长度改变
  

•  'f' - 过滤输入
  

•  't' - 表格
  

•  'i' - 信息
  

•  'p' - 分页
  

•  'r' - 处理
  

• 可供使用的常量

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

• 需要的语法

•  '<' 和 '>' - div元素
  

•  '<"class" and '>' - 带有class属性的div元素
  

•  '<"#id" and '>' - 带有id属性的div元素
  

• 例子

•  '<"wrapper"flipt>'
  

•  '<lf<t>ip>'
  

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“sDom”: ‘<"top"i>rt<"bottom"flp><“clear”&lgt;’

});

});

/*

• sPaginationType

• 默认为two_button

• DataTable内建了两种交互式分页策略，两个按钮和全页数，展现给终端用户不同的控制方式

• 可以通过API增加策略

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“sPaginationType”: “full_numbers”

});

})

/*

• sScrollXInner

• 默认为空字符串，即：无效

• 当横向滚动可用的时候，该属性可以用来强制DataTable的宽度比需要的更长

• 比如你需要表格彼此相隔适宜，该变量可以用来使表格变大，而且强制滚动

• 该该属性可以是css设置，或者一个数字（作为像素量度来使用）

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“sScrollX”: “100%”,

“sScrollXInner”: “110%”

});

});

/*

• sServerMethod

• 默认值为GET

• 设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式

*/

$(document).ready(function(){

$(‘#example’).dataTable({

“bServerSide”: true,

“sAjaxSource”: “scripts/post.php”,

“sServerMethod”: “POST”

});

});

/------------------------------------------------Callback------------------------------------------------/

/*

• fnCookieCallback

• 无默认值

• 当DataTable的状态保留可用时，自定义被保存的cookie和参数。只要cookie被修改就会调用此方法

• 该方法需要返回一个格式良好的cookie字符串，注意数据对象是以Javascript对象的形式传递进来的，必须转换成字符串，例如JSON格式

*/

$(document).ready(function (){

$(‘#example’).dataTable({

“fnCookieCallback”: function (sName, oData, sExpires, sPath) {

// Customise oData or sName or whatever else here

return sName + “=”+JSON.stringify(oData)+“; expires=” + sExpires +“; path=” + sPath;

}

});

});

/*

• fnCreatedRow

• 无默认值

• 当一个新的TR元素（并且所有TD子元素被插入）被创建或者被作为一个DOM资源被注册时调用该函数

• 允许操作该TR元素

*/

$(document).ready(function(){

$(‘#example’).dataTable({

“fnCreatedRow”: function( nRow, aData, iDataIndex ){

// Bold the grade for all ‘A’ grade browsers

if ( aData[4] == “A” )

{

$(‘td:eq(4)’, nRow).html( ‘A’ );

}

}

});

});

/*

• fnDrawCallback

• 无默认值

• 每当draw事件发生时调用该函数，允许你动态编辑新建的dom对象的任何属性

*/

$(document).ready( function(){

$(‘#example’).dataTable({

“fnDrawCallback”: function(){

alert( ‘DataTables has redrawn the table’ );

}

});

});

/*

• fnFooterCallback

• 无默认值

• 与fnHeaderCallback()完全相同，只是该函数允许你在每一个draw时间发生时修改页脚

*/

$(document).ready( function(){

$(‘#example’).dataTable({

“fnDrawCallback”: function() {

alert( ‘DataTables has redrawn the table’ );

}

});

});

/*

• fnFormatNumber

• 无默认值

• 当渲染表格信息（例如：显示57条记录中的1-10条）中大的数字时

• 为了方便用户，DataTable会使用逗号分割每千单位（例如1000000会被渲染为1,000,000）

• 该函数会重写DataTable默认使用的策略

*/

$(document).ready(function(){

$(‘#example’).dataTable({

“fnFormatNumber”: function ( iIn ) {

if ( iIn < 1000 ) {

return iIn;

} else {

var

s=(iIn+“”),

a=s.split(“”), out=“”,