/*------------------------------------------------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[] == "A") {
$('td:eq()', 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
* 无默认值
* 当渲染表格信息（例如：显示条记录中的-条）中大的数字时
* 为了方便用户，DataTable会使用逗号分割每千单位（例如会被渲染为,,）
* 该函数会重写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 % === 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 % === 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() == ) {
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('A');
}
}
});
});
/*
* 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中加载
* 不过你或许希望使用本地存储（HTML支持），或者服务端数据库
*/
$(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中
* 不过你或许希望使用本地存储（HTML支持），或者服务端数据库
*/
$(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 = "";
});
});
/*
* 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[] + ' ' + oObj.aData[3];
},
"bUseRendered": false,
"aTargets": [0]
}]
});
});
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [{
"fnRender": function(oObj) {
return oObj.aData[] + ' ' + oObj.aData[];
},
"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元素（例如增加背景颜色）
*/
$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [{
"aTargets": [],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
if (sData == ".") {
$(nTd).css('color', 'blue')
}
}
}]
});
});
/*
* fnRender
* 无默认值
* 自定义列中每个单元格被展示的时候调用的展示函数
*/
// Using aoColumnDefs
$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [{
"fnRender": function(o, val) {
return o.aData[] + ' ' + o.aData[3];
},
"aTargets": []
}]
});
});
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [{
"fnRender": function(o, val) {
return o.aData[] + ' ' + o.aData[3];
}
},
null,
null,
null,
null
]
});
});
/*
* iDataSort
* 默认值为-，使用自动计算的列标
* 当选择该列进行排序的时候，你希望调用排序操作的列的列号，该参数可以用来按隐藏列排序
*/
// Using aoColumnDefs
$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "iDataSort": , "aTargets": [0] }
]
});
});
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
{ "iDataSort": },
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
$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "sClass": "my_class", "aTargets": [0] }
]
});
});
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
{ "sClass": "my_class" },
null,
null,
null,
null
]
});
});
/*
* sContentPadding
* 默认值为空字符串
* 当DataTable计算分配给每一列的列宽的时候，会寻找每一列中最长的字符串，然后构建一个临时表
* 从临时表中读取宽度，这样带来的问题是'mmm'会比'iiii'的长度长很多，但是后者的长度要大
* 这样计算值会出现偏差（正确的处理然后放入DOM对象再测量长度会相当的慢），我们提供了这个选项作为一个解决方法
* 它会把他的值添加到该列最长的值的后面来计算列宽，通常你不需要该属性，该属性也没有被写到DataTables.net的文档中
*/
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
null,
null,
null,
{
"sContentPadding": "mmm"
}
]
});
});
/*
* sDefaultContent
* 默认为空字符串
* 允许给列值一个默认值，只要发现null值就会显示默认值
* 可以由mDataProp设置为null或者数据源是null引起
*/
// Using aoColumnDefs
$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [{
"mDataProp": null,
"sDefaultContent": "Edit",
"aTargets": [-]
}]
});
});
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
null,
null,
null,
{
"mDataProp": null,
"sDefaultContent": "Edit"
}
]
});
});
/*
* sName
* 默认值为空字符串
* 该参数只有使用在服务器端处理的时候调用，在了解客户端展示了哪些列的时候十分有用
* 然后与数据库字段建立映射，当被定义时，如果服务器端返回的信息的顺序不是期望的顺序，也可以使用名字去区分
* 使用这种方式的好处是：用户在客户端交换了列，你的服务器端代码不用更新
*/
// Using aoColumnDefs
$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "sName": "engine", "aTargets": [0] },
{ "sName": "browser", "aTargets": [1] },
{ "sName": "platform", "aTargets": [2] },
{ "sName": "version", "aTargets": [3] },
{ "sName": "grade", "aTargets": [4] }
]
});
});
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "grade" }
]
});
});
/*
* sSortDataType
* 默认值为std
* 为排序操作定义可以用来在排序前读取实时表格信息（更新内部缓存版本）的数据源的类型
* 允许排序事件发生在用户可编辑的元素上，例如输入框
*/
// Using aoColumnDefs
$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "sSortDataType": "dom-text", "aTargets": [2,3 ] },
{ "sType": "numeric", "aTargets": [3] },
{ "sSortDataType": "dom-select", "aTargets": [4] },
{ "sSortDataType": "dom-checkbox", "aTargets": [5] }
]
});
});
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
null,
null,
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text", "sType": "numeric" },
{ "sSortDataType": "dom-select" },
{ "sSortDataType": "dom-checkbox" }
]
});
});
/*
* sTitle
* 默认值为null,从TH标签读取
* 列名
*/
// Using aoColumnDefs
$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "sTitle": "My column title", "aTargets": [0] }
]
});
});
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
{ "sTitle": "My column title" },
null,
null,
null,
null
]
});
});
/*
* sType
* 默认值为null,从弱引用数据中自动判断
* 允许你指定该列数据按什么类型来排序，目前有四种类型（字符串，数字，日期和html（在排序前会自动除去HTML标记））可选
* 注意只有能够被Javascript的Date对象接受的格式化日期字符串才会被当作日期类型接受，例如"Mar , : PM"
* 默认是使用html类型，更多类型可以通过插件添加
*/
// Using aoColumnDefs
$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "sType": "html", "aTargets": [0] }
]
});
});
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
{ "sType": "html" },
null,
null,
null,
null
]
});
});
/*
* sWidth
* 默认值为null,自动的
* 定义列的宽度，该参数可以接受CSS定义（em,px等），DataTable对没有通过该接口指定宽度的列使用灵活宽度
* 从而保证表格是可被读的
*/
// Using aoColumnDefs
$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "sWidth": "%", "aTargets": [0] }
]
});
});
// Using aoColumns
$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
{ "sWidth": "%" },
null,
null,
null,
null
]
});
});
---ServerSide
