dotaTable之使用详解，mybatis一对多查询原理前缀

默认值为activate to sort column ascending

当一列被按照升序降序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀（？）

*/

“sSortDescending”: " - click/return to sort descending"

},

“oPaginate”: {

/*

默认值为First

当使用全数字类型的分页组件的时候，到第一页按钮上的文字

*/

“sFirst”: “First page”,

/*

默认值为Last

当使用全数字类型的分页组件的时候，到最后一页按钮上的文字

*/

“sLast”: “Last page”,

/*

默认值为Next

当使用全数字类型的分页组件的时候，到下一页按钮上的文字

*/

“sNext”: “Next page”,

/*

默认值为Previous

当使用全数字类型的分页组件的时候，到前一页按钮上的文字

*/

“sPrevious”: “Previous page”

},

/*

默认值activate to sort column ascending为

当表格中没有数据（无视因为过滤导致的没有数据）时，该字符串年优先与sZeroRecords显示

注意这是个可选参数，如果没有指定，sZeroRecrods会被使用（既不是默认值也不是给定的值）

*/

“sEmptyTable”: “No data available in table”,

/*

默认值为Showing START to END of TOTAL entries

该属性给终端用户提供当前页面的展示信息，字符串中的变量会随着表格的更新被动态替换，而且可以被任意移动和删除

*/

“sInfo”: “Got a total of TOTAL entries to show (START to END)”,

/*

默认值为Showing 0 to 0 of 0 entries

当表格中没有数据时展示的表格信息，通常情况下格式会符合sInfo的格式

*/

“sInfoEmpty”: “No entries to show”,

/*

默认值为(filtered from MAX total entries)

当用户过滤表格中的信息的时候，该字符串会被附加到信息字符串的后面，从而给出过滤器强度的直观概念

*/

“sInfoFiltered”: " - filtering from MAX records",

/*

默认值为空字符串

使用该属性可以很方便的向表格信息字符串中添加额外的信息，被添加的信息在任何时候都会被附加到表格信息组件的后面

sInfoEmpty和sInfoFiltered可以以任何被使用的方式进行结合

*/

“sInfoPostFix”: “All records shown are derived from real information.”,

/*

默认值为’,’

DataTable有内建的格式化数字的工具，可以用来格式化表格信息中较大的数字

默认情况下会自动调用，可以使用该选项来自定义分割的字符

*/

“sInfoThousands”: “'”,

/*

默认值为Show MENU entries

描述当分页组件的下拉菜单的选项被改变的时候发生的动作，'MENU’变量会被替换为默认的10，25，50，100

如果需要的话可以被自定义的下拉组件替换

*/

“sLengthMenu”: “Display MENU records”,

/*

默认值为Loading…

当使用Ajax数据源和表格在第一次被加载搜集数据的时候显示的字符串，该信息在一个空行显示

向终端用户指明数据正在被加载，注意该参数在从服务器加载的时候无效，只有Ajax和客户端处理的时候有效

*/

“sLoadingRecords”: “Please wait - loading…”,

/*

默认值为Processing…

当表格处理用户动作（例如排序或者类似行为）的时候显示的字符串

*/

“sProcessing”: “DataTables is currently busy”,

/*

默认为Search:

描述用户在输入框输入过滤条件时的动作，变量’INPUT’,如果用在字符串中

DataTable会使用用户输入的过滤条件替换_INPUT_为HTML文本组件，从而可以支配它（即用户输入的过滤条件）出现在信息字符串中的位置

如果变量没有指定，用户输入会自动添加到字符串后面

*/

“sSearch”: “Apply filter INPUT to table”,

/*

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

所有语言信息可以被存储在服务器端的文件中，DataTable可以根据该参数指定的URL去寻找

必须保存语言文件的URL信息，必须是JSON格式，对象和初始化中使用的oLanguage对象具有相同的属性

请参考示例文件来了解该参数是如何工作的

*/

“sUrl”: “ http://www.sprymedia.co.uk/dataTables/lang.txt”,

/*

默认值为No matching records found

当对数据进行过滤操作后，如果没有要显示的数据，会在表格记录中显示该字符串

sEmptyTable只在表格中没有数据的时候显示，忽略过滤操作

*/

“sZeroRecords”: “No records to display”

}

});

});

/------------------------------------------------Options------------------------------------------------/

/*

bDestroy

默认为false

使用传递的新的初始化对象中的属性构造一个新的表格，并替换一个匹配指定的选择器的表格

如果没有匹配到表格，新的表格会被作为一个普通表格被构建

*/

$(‘selector’).dataTable({

“bFilter”: false,

“bDestroy”: true

});

/*

bRetrieve

默认为false

使用指定的选择器检索表格，注意，如果表格已经被初始化，该参数会直接返回已经被创建的对象

并不会顾及你传递进来的初始化参数对象的变化，将该参数设置为true说明你确认已经明白这一点

如果你需要的话，bDestroy可以用来重新初始化表格

*/

$(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

默认为true

指明DataTable中滚动的标题元素是否被允许设置内边距和外边距等

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“bScrollAutoCss”: false,

“sScrollY”: “200px”

});

});

/*

bScrollCollapse

默认为false

当垂直滚动被允许的时候，DataTable会强制表格视图在任何时候都是给定的高度（对布局有利）

不过，当把数据集过滤到十分小的时候看起来会很古怪，而且页脚会留在最下面

当结果集的高度比给定的高度小时该参数会使表格高度自适应

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“sScrollY”: “200”,

“bScrollCollapse”: true

});

});

/*

bSortCellsTop

默认为false

是否允许DataTable使用顶部（默认为true）的单元格，或者底部（默认为false）的单元格，当使用复合表头的时候会有些用处

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“bSortCellsTop”: true

});

});

/*

iCookieDuration

默认为7200秒（2个小时）

设置用来存储会话信息的cookie的持续时间，单位是秒

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“iCookieDuration”: 606024 // 1 day

});

})

/*

iDeferLoading

默认为null

当选项被开启的时候，DataTable在非加载第一次的时候不会向服务器请求数据，而是会使用页面上的已有数据（不会应用排序等）

因此在加载的时候保留一个XmlHttpRequest，iDeferLoading被用来指明需要延迟加载，而且也用来通知DataTable一个满的表格有多少条数据

信息元素和分页会被正确保留

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“bServerSide”: true,

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

“iDeferLoading”: 57

});

});

/*

iDisplayLength

默认为10

单页显示的数据的条数，如果bLengthChange属性被开启，终端用户可以通过一个弹出菜单重写该数值

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“bServerSide”: true,

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

“iDeferLoading”: 57

});

});

/*

iDisplayStart

默认为0

当开启分页的时候，定义展示的记录的起始序号，不是页数，因此如果你每个分页有10条记录而且想从第三页开始

需要把该参数指定为20

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“iDisplayStart”: 20

});

})

/*

iScrollLoadGap

默认为100

滚动余界是指DataTable在当前页面还有多少条数据可供滚动时自动加载新的数据，你可能希望指定一个足够大的余界

以便滚动加载数据的操作对用户来说是平滑的，同时也不会大到加载比需要的多的多的数据

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“bScrollInfinite”: true,

“bScrollCollapse”: true,

“sScrollY”: “200px”,

“iScrollLoadGap”: 50

});

});

/*

iTabIndex

默认为0

默认情况下DataTable允许通过为需要键盘导航的元素添加tabindex属性来进行导航（排序、分页、过滤）

允许你通过tab键切换控制组件，使用回车键去激活他们，默认为0表示按照文档流来切换

如果需要的话，你可以使用该参数重写切换顺序，使用-1来禁止内建的键盘导航

*/

$(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

默认为aaData

当使用Ajax数据源或者服务器端处理的时候，DataTable会默认搜索aaData属性作为数据源

该选项允许变更数据源的名称，你可以使用JavaScript的点号对象表示法去访问多级网状数据源

*/

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

默认为null

该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData）

可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“sAjaxSource”: “ http://www.sprymedia.co.uk/dataTables/json.php”

});

})

/*

sCookiePrefix

默认为SpryMedia_DataTables_

该参数可以用来重写DataTable默认指定的用来存储状态信息的cookie的前缀

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“sCookiePrefix”: “my_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( ‘<b>A</b>’ );

}

}

});

});

/*

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=“”,

iLen=s.length;

for ( var i=0 ; i<iLen ; i++ ) {

if ( i%3 === 0 && i !== 0 ) {

out = “'”+out;

}

out = a[iLen-i-1]+out;

}

}

return out;

};

});

});

/*

fnHeaderCallback

无默认值

每当draw事件发生时调用该函数，允许你动态编辑表头行，可以用来计算和展示关于表格的有用的信息

*/

$(document).ready(function(){

$(‘#example’).dataTable({

“fnFormatNumber”: function ( iIn ) {

if ( iIn < 1000 ) {

return iIn;

} else {

var

s=(iIn+“”),

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

iLen=s.length;

for ( var i=0 ; i<iLen ; i++ ) {

if ( i%3 === 0 && i !== 0 ) {

out = “'”+out;

}

out = a[iLen-i-1]+out;

}

}

return out;

};

});

});

/*

fnInfoCallback

无默认值

信息元素可以用来传输表格当前状态的信息，尽管DataTable提供的国际化的选项在处理大多数自定义情况时已经相当方便了

或许你有时仍然希望自定义深层的字符串,该函数会满足你的需要

*/

$(‘#example’).dataTable( {

“fnInfoCallback”: function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {

return iStart +" to "+ iEnd;

}

});

/*

fnInitComplete

无默认值

当表格被初始化后调用该函数，通常DataTable会被持续初始化，并不需要该函数

可是，当使用异步的XmlHttpRequest从外部获得语言信息时，初始化并不是持续的

*/

$(document).ready( function(){

$(‘#example’).dataTable({

“fnInitComplete”: function(oSettings, json) {

alert( ‘DataTables has finished its initialisation.’ );

}

});

})

/*

fnPreDrawCallback

无默认值

在每一个表格draw事件发生前调用该函数，通过返回false来取消draw事件

其它任何的返回值，包括undefined都会导致draw事件的发生

*/

$(document).ready( function(){

$(‘#example’).dataTable({

“fnPreDrawCallback”: function( oSettings ) {

if ( $(‘#test’).val()

【一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义】

浏览器打开：qq.cn.hn/FTf 免费领取
1.
2.
3.
== 1 ) {

return false;

}

}

});

});

/*

fnRowCallback

无默认值

你可以通过该函数在每一个表格绘制事件发生之后，渲染到屏幕上之前，向表格里的每一行传递’处理过程’

该函数可以用来设置行的class名字等

*/

$(document).ready(function(){

$(‘#example’).dataTable({

“fnRowCallback”: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {

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

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

{

$(‘td:eq(4)’, nRow).html( ‘<b>A</b>’ );

}

}

});

});

/*

fnServerData

无默认值

你可以使用该参数重写从服务器获取数据的方法（$.getJSON）,从而使其更适合你的应用

例如你可以使用POST方式提交，或者从Google Gears或者AIR数据库获取数据

*/

// POST data to server

$(document).ready(function(){

$(‘#example’).dataTable( {

“bProcessing”: true,

“bServerSide”: true,

“sAjaxSource”: “xhr.php”,

“fnServerData”: function ( sSource, aoData, fnCallback ) {

$.ajax( {

“dataType”: ‘json’,

“type”: “POST”,

“url”: sSource,

“data”: aoData,

“success”: fnCallback

} );

}

});

});

/*

fnServerParams

无默认值

用来在向服务器发送Ajax请求时发送额外的数据，例如自定义的过滤信息，该函数使向服务器发送额外参数变得简单

传递进来的参数是DataTable建立的数据集合，你可以根据需要添加或者修改该集合

*/

$(document).ready(function(){

$(‘#example’).dataTable( {

“bProcessing”: true,

“bServerSide”: true,

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

“fnServerParams”: function ( aoData ) {

aoData.push( { “name”: “more_data”, “value”: “my_value” } );

}

});

});

/*

fnStateLoad

无默认值

加载表格状态，使用该函数你可以定义状态信息加载的位置和方式，默认情况下DataTable会从cookie中加载

不过你或许希望使用本地存储（HTML5支持），或者服务端数据库

*/

$(document).ready(function(){

$(‘#example’).dataTable({

“bStateSave”: true,

“fnStateSave”: function (oSettings, oData) {

var o;

// Send an Ajax request to the server to get the data. Note that

// this is a synchronous request.

$.ajax( {

“url”: “/state_load”,

“async”: false,

“dataType”: “json”,

“success”: function (json) {

o = json;

}

} );

return o;

}

});

});

/*

fnStateLoadParams

无默认值

该回调可以用来在加载状态信息之前编辑状态信息

函数在表格从存储的数据加载状态信息时调用，在表格<当前使用的设置对象>被<从保存信息中加载的设置对象>修改以前调用

注意作为插件开发者，你应该使用’stateLoadParams’事件去加载plug-in的参数

*/

// Remove a saved filter, so filtering is never loaded

$(document).ready(function(){

$(‘#example’).dataTable({

“bStateSave”: true,

“fnStateLoadParams”: function (oSettings, oData) {

oData.oFilter.sSearch = “”;

});

});

// Disallow state loading by returning false

$(document).ready(function(){

$(‘#example’).dataTable({

“bStateSave”: true,

“fnStateLoadParams”: function (oSettings, oData) {

return false;

});

});

/*

fnStateLoaded

无默认值

在表格状态被状态存储方法读取和DataTable设置对象被修改时调用，作为被状态信息被加载的结果

*/

// Show an alert with the filtering value that was saved

$(document).ready(function(){

$(‘#example’).dataTable({

“bStateSave”: true,

“fnStateLoaded”: function (oSettings, oData) {

alert( 'Saved filter was: '+oData.oFilter.sSearch );

});

});

/*

fnStateSave

无默认值

保存表格状态，使用该函数你可以定义状态信息保存的位置和方式，默认情况下DataTable会保存在cookie中

不过你或许希望使用本地存储（HTML5支持），或者服务端数据库

*/

$(document).ready(function(){

$(‘#example’).dataTable({

“bStateSave”: true,

“fnStateSave”: function (oSettings, oData) {

// Send an Ajax request to the server with the state object

$.ajax( {

“url”: “/state_save”,

“data”: oData,

“dataType”: “json”,

“method”: “POST”

“success”: function () {}

});

}

});

});

/*

fnStateSaveParams

无默认值

该回调允许你编辑被保存的状态信息，在表格改变了状态信息需要保存的时候调用

可以使用该回调在保存状态信息的对象被保存以前对其进行修改，包括添加或者其它状态属性或者修改

*/

// Remove a saved filter, so filtering is never saved

$(document).ready(function(){

$(‘#example’).dataTable({

“bStateSave”: true,

“fnStateLoadParams”: function (oSettings, oData) {

oData.oFilter.sSearch = “”;

});

});

/------------------------------------------------Columns------------------------------------------------/

/*

aDataSort

默认为null,自动使用列序号作为默认

在排序一列的时候同时将其它几列也排序，例如名和姓作为多列排序

*/

// Using aoColumnDefs

$(document).ready(function(){

$(‘#example’).dataTable({

“aoColumnDefs”: [

{ “aDataSort”: [ 0, 1 ], “aTargets”: [ 0 ] },

{ “aDataSort”: [ 1, 0 ], “aTargets”: [ 1 ] },

{ “aDataSort”: [ 2, 3, 4 ], “aTargets”: [ 2 ] }

]

});

});

// Using aoColumns

$(document).ready(function(){

$(‘#example’).dataTable({

“aoColumns”: [

{ “aDataSort”: [ 0, 1 ] },

{ “aDataSort”: [ 1, 0 ] },

{ “aDataSort”: [ 2, 3, 4 ] },

null,

null

]

});

});

/*

asSorting

默认为[ ‘asc’, ‘desc’ ]

你可以通过该参数控制默认排序的方向，甚至改变排序处理器的行为（例如：只允许升序排序）

*/

// Using aoColumnDefs

$(document).ready(function(){

$(‘#example’).dataTable({

“aoColumnDefs”: [

{ “asSorting”: [ “asc” ], “aTargets”: [ 1 ] },

{ “asSorting”: [ “desc”, “asc”, “asc” ], “aTargets”: [ 2 ] },

{ “asSorting”: [ “desc” ], “aTargets”: [ 3 ] }

]

});

});

// Using aoColumns

$(document).ready(function(){

$(‘#example’).dataTable( {

“aoColumns”: [

null,

{ “asSorting”: [ “asc” ] },

{ “asSorting”: [ “desc”, “asc”, “asc” ] },

{ “asSorting”: [ “desc” ] },

null

]

});

});

/*

bSearchable

默认为true

是否在列上应用过滤

*/

// Using aoColumnDefs

$(document).ready(function(){

$(‘#example’).dataTable({

“aoColumnDefs”: [

{ “bSearchable”: false, “aTargets”: [ 0 ] }

]} );

});

// Using aoColumns

$(document).ready(function(){

$(‘#example’).dataTable({

“aoColumns”: [

{ “bSearchable”: false },

null,

null,

null,

null

] });

});

/*

bSortable

默认为true

是否在某一列上开启排序

*/

// Using aoColumnDefs

$(document).ready(function(){

$(‘#example’).dataTable({

“aoColumnDefs”: [

{ “bSortable”: false, “aTargets”: [ 0 ] }

] });

});

// Using aoColumns

$(document).ready(function(){

$(‘#example’).dataTable( {

“aoColumns”: [

{ “bSortable”: false },

null,

null,

null,

null

] });

});

/*

bUseRendered

默认为true

当对一列使用使用fnRender时，你或许希望使用原始的数据（渲染以前）去排序或者过滤（默认是使用用户看到的渲染过的数据）

或许对日期类型有些用处，注意，现在建议使用mDataProp作为函数并且使用该函数提供的type参数，来允许不同的数据被用来排序，过滤，展现和类型检测

*/

// Using aoColumnDefs

$(document).ready(function() {

$(‘#example’).dataTable( {

“aoColumnDefs”: [

{

“fnRender”: function ( oObj ) {

return oObj.aData[0] +’ '+ oObj.aData[3];

},

“bUseRendered”: false,

“aTargets”: [ 0 ]

}

]

} );

} );

// Using aoColumns

$(document).ready(function() {

$(‘#example’).dataTable( {

“aoColumns”: [

{

“fnRender”: function ( oObj ) {

return oObj.aData[0] +’ '+ oObj.aData[3];

},

“bUseRendered”: false

},

null,

null,

null,

null

]

} );

} );

/*

bVisible

默认值为true

是否展示某一列

*/

// Using aoColumnDefs

$(document).ready(function() {

$(‘#example’).dataTable( {

“aoColumnDefs”: [

{ “bVisible”: false, “aTargets”: [ 0 ] }

] } );

} );

// Using aoColumns

$(document).ready(function() {

$(‘#example’).dataTable( {

“aoColumns”: [

{ “bVisible”: false },

null,

null,

null,

null

] } );

} );

/*

fnCreatedCell

无默认值

每当新的单元格被建立（Ajax源等）或者处理输入（DOM源）时，开发者可定义的函数会被调用

该属性用作fnRender的补充来允许你修改在fnRender函数调用之后新建的DOM元素（例如增加背景颜色）

nTd:TD元素, sData：单元格的值, oData：单元格所在的行值, iRow：当前页面显示行的索引, iCol：当前所在列的索引

*/

$(document).ready(function() {

$(‘#example’).dataTable( {

“aoColumnDefs”: [ {

“aTargets”: [3],

“fnCreatedCell”: function (nTd, sData, oData, iRow, iCol) {

if ( sData == “1.7” ) {

$(nTd).css(‘color’, ‘blue’)

}

}

} ]

});

} );

/*

fnRender

无默认值

自定义列中每个单元格被展示的时候调用的展示函数

*/

// Using aoColumnDefs

$(document).ready(function() {

$(‘#example’).dataTable( {

“aoColumnDefs”: [

{

“fnRender”: function ( o, val ) {

return o.aData[0] +’ '+ o.aData[3];

},

“aTargets”: [ 0 ]

}

]

} );

} );

// Using aoColumns

$(document).ready(function() {

$(‘#example’).dataTable( {

“aoColumns”: [

{ “fnRender”: function ( o, val ) {

return o.aData[0] +’ '+ o.aData[3];

} },

null,

null,

null,

null

]

} );

} );

/*

iDataSort

默认值为-1，使用自动计算的列标

当选择该列进行排序的时候，你希望调用排序操作的列的列号，该参数可以用来按隐藏列排序

*/

// Using aoColumnDefs

$(document).ready(function() {

$(‘#example’).dataTable( {

“aoColumnDefs”: [

{ “iDataSort”: 1, “aTargets”: [ 0 ] }

]

} );

} );

// Using aoColumns

$(document).ready(function() {

$(‘#example’).dataTable( {

“aoColumns”: [

{ “iDataSort”: 1 },

null,

null,

null,

null

]

} );

} );

/*

mDataProp

默认为null,使用自动计算的列标

该属性可以从任何JSON格式数据源读取属性，包括深层网状的对象和属性，

有几种不同的传递方式可以影响mDataProp的行为

整型：被当作数据源的数组下表，是DataTable使用的默认行为（每列递增）

字符串类型：被当作从数据源获取的对象的属性名，注意你可以使用Javascript点号访问符去访问深层次的属性或数组

null：sDafaultContent选项会被使用到单元格上，（默认是空字符串，当生成可编辑列、可删除列的时候可以使用该属性）

函数：当表格获取或者设置单元格时被调用的函数，函数有三个参数

 {array|object}:该行的数据源
 {string}:调用数据请求的类型，设置数据时是'set'，收集数据时是'filter','display','type','sort'
 {*}:当第二个参数是set的时候，要被设置的数据
 当类型是'set'的时候，该函数不需要返回一个值，除此之外，返回值是可以用来请求数据的
*/

// Read table data from objects

$(document).ready(function() {

var oTable = $(‘#example’).dataTable( {

“sAjaxSource”: “sources/deep.txt”,

“aoColumns”: [

{ “mDataProp”: “engine” },

{ “mDataProp”: “browser” },

{ “mDataProp”: “platform.inner” },

{ “mDataProp”: “platform.details.0” },

{ “mDataProp”: “platform.details.1” }

]

} );

} );

// Using mDataProp as a function to provide different information for

// sorting, filtering and display. In this case, currency (price)

$(document).ready(function() {

var oTable = $(‘#example’).dataTable( {

“aoColumnDefs”: [

{

“aTargets”: [ 0 ],

“mDataProp”: function ( source, type, val ) {

if (type === ‘set’) {

source.price = val;

// Store the computed dislay and filter values for efficiency

source.price_display = val==“” ? “” : “$”+numberFormat(val);

source.price_filter = val==“” ? “” : “$”+numberFormat(val)+" "+val;

return;

}

else if (type === ‘display’) {

return source.price_display;

}

else if (type === ‘filter’) {

return source.price_filter;

}

// ‘sort’ and ‘type’ both just use the integer

return source.price;

}

]

} );

} );

/*

sClass

默认值为空字符串

该列的每一个单元格被赋予的class

*/

// Using aoColumnDefs