datatables参数配置详解

时间 2019-11-21

标签 datatables 参数配置详解繁體版

原文原文链接

//@translator codepiano
//@blog codepiano
//@email codepiano.li@gmail.com
//尝试着翻译了一下，不免有错误的地方，欢迎发邮件告知，多谢。
/*------------------------------------------------Feature------------------------------------------------*/
$( document).ready( function (){
$(‘selector‘).dataTable( {
/*
* 默认为true
* 是否自动计算列宽，计算列宽会花费一些时间，若是列宽经过aoColumns传递，能够关闭该属性做为优化
*/
"bAutoWidth":true,
/*
* 默认为false
* 是否延迟渲染，当用Ajax或者js方式加载数据时开启延迟渲染会带来很大的速度提高
* 当该属性设置为true时，表格每一行新增的元素只有在须要被画出来时才会被DataTable建立出来
*/
"bDeferRender":false,
/*
* 默认为true
* 是否对数据进行过滤，数据过滤是十分灵活的，容许终端用户输入多个用空格分隔开的关键字
* 匹配包含这些关键字的行，即便关键字的顺序不是用户输入的顺序，过滤操做会跨列进行匹配，关键字能够分布在一行中不一样的列
* 要注意的是若是你想在DataTable中使用过滤，该选项必须设置为true，若是想移除默认过滤输入框可是保留过滤功能，请设置为false(API没写，推测是false)
*/
"bFilter":true,
/*
* 默认为true
* 是否显示表格信息，是指当前页面上显示的数据的信息，若是有过滤操做执行，也会显示过滤操做的信息
*/
"bInfo":true,
/*
* 默认为fasle
* 是否开启jQuery UI ThemeRoller支持，须要一些ThemeRoller使用的标记，这些标记有些与DataTable传统使用的有轻微的差别，有些是额外附加的
*/
"bJQueryUI":false,
/*
* 默认为true
* 是否容许终端用户从一个选择列表中选择分页的页数，页数为10，25，50和100，须要分页组件bPaginate的支持
*/
"bLengthChange":false,
/*
* 默认为true
* 是否开启分页功能,即便设置为false,仍然会有一个默认的<前进,后退>分页组件
*/
"bPaginage":true,
/*
* 默认为false
* 当表格在处理的时候（好比排序操做）是否显示“处理中...”
* 当表格的数据中的数据过多以致于对其中的记录进行排序时会消耗足以被察觉的时间的时候，该选项会有些用处
*/
"bProcessing":false,
/*
* 默认为false
* 是否开启不限制长度的滚动条（和sScrollY属性结合使用），不限制长度的滚动条意味着当用户拖动滚动条的时候DataTable会不断加载数据
* 当数据集十分大的时候会有些用处，该选项没法和分页选项同时使用，分页选项会被自动禁止，注意，额外推荐的滚动条会优先与该选项
*/
"bScrollInfinite":false,
/*
* 默认为false
* 配置DataTable使用服务器端处理，注意，sAjaxSource参数必须指定，以便给DataTable一个为每一行获取数据的数据源
*/
"bServerSide":false,
/*
* 默认为true
* 是否开启列排序，对单独列的设置在每一列的bSortable选项中指定
*/
"bSort":true,
/*
* 默认为true
* 是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class，当该列被排序的时候，能够切换其背景颜色
* 该选项做为一个来回切换的属性会增长执行时间（当class被移除和添加的时候）
* 当对大数据集进行排序的时候你或许但愿关闭该选项
*/
"bSortClasses":true,
/*
* 默认为false
* 是否开启状态保存，当选项开启的时候会使用一个cookie保存表格展现的信息的状态，例如分页信息，展现长度，过滤和排序等
* 这样当终端用户从新加载这个页面的时候可使用之前的设置
*/
"bStateSave":false,
/*
* 默认为空字符串，即：无效
* 是否开启水平滚动，当一个表格过于宽以致于没法放入一个布局的时候，或者表格有太多列的时候，你能够开启该选项
* 从而在一个可横向滚动的视图里面展现表格，该属性能够是css设置，或者一个数字（做为像素量度来使用）
*/
"sScrollX":"100%",
/*
* 默认为空字符串，即：无效
* 是否开启垂直滚动，垂直滚动会驱使DataTable设置为给定的长度，任何溢出到当前视图以外的数据能够经过垂直滚动进行察看
* 当在小范围区域中显示大量数据的时候，能够在分页和垂直滚动中选择一种方式，该属性能够是css设置，或者一个数字（做为像素量度来使用）
*/
"sScrollY":"100%",
/*
* 自定义语言设置
*/
"oLanguage":{
"oAria":{
/*
* 默认值为activate to sort column ascending
* 当一列被按照升序排序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀（？）
*/
"sSortAscending": " - click/return to sort ascending",
/*
* 默认值为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": 60*60*24 // 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() == 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元素（例如增长背景颜色）
*/
$(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
$(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": [ -1 ]
}
]
} );
} );
// 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 26, 2008 5:03 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定义（3em,20px等），DataTable对没有经过该接口指定宽度的列使用灵活宽度
* 从而保证表格是可被读的
*/
// Using aoColumnDefs
$(document).ready(function() {
$(‘#example‘).dataTable( {
"aoColumnDefs": [
{ "sWidth": "20%", "aTargets": [ 0 ] }
]
} );
} );
// Using aoColumns
$(document).ready(function() {
$(‘#example‘).dataTable( {
"aoColumns": [
{ "sWidth": "20%" },
null,
null,
null,
null
]
} );
} );
/*------------------------------------------------ServerSide------------------------------------------------*/
/*
* bServerSide
* 默认值false
* 配置使用服务器端处理的DataTable，注意sAjaxSource参数必须指定，以便给DataTable一个获取每行数据的数据源
*/
$(document).ready( function () {
$(‘#example‘).dataTable( {
"bServerSide": true,
"sAjaxSource": "xhr.php"
} );
} );
/*
* 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" } );
}
} );
} );
/*
* 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"
});
})
/*
* sServerMethod
* 默认值为GET
* 设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式
*/
$(document).ready(function(){
$(‘#example‘).dataTable({
"bServerSide": true,
"sAjaxSource": "scripts/post.php",
"sServerMethod": "POST"
});
});

var docrTable = $('#docrevisontable').dataTable({
"bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示
"bServerSide" : true, //是否启动服务器端数据导入
"bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bJQueryUI" : true, //是否使用 jQury的UI theme
"sScrollY" : 450, //DataTables的高
"sScrollX" : 820, //DataTables的宽
"aLengthMenu" : [20, 40, 60], //更改显示记录数选项
"iDisplayLength" : 40, //默认显示的记录数
"bAutoWidth" : false, //是否自适应宽度
//"bScrollInfinite" : false, //是否启动初始化滚动条
"bScrollCollapse" : true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
"bPaginate" : true, //是否显示（应用）分页器
"bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数
"sPaginationType" : "full_numbers", //详细分页组，能够支持直接跳转到某页
"bSort" : true, //是否启动各个字段的排序功能
"aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列
"bFilter" : true, //是否启动过滤、搜索功能
"aoColumns" : [{
"mDataProp" : "USERID",
"sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
"bVisible" : false //此列不显示
}, {
"mDataProp" : "USERNAME",
"sTitle" : "用户名",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "EMAIL",
"sTitle" : "电子邮箱",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "MOBILE",
"sTitle" : "手机",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "PHONE",
"sTitle" : "座机",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "NAME",
"sTitle" : "姓名",
"sDefaultContent" : "",
"sClass" : "center"
}, {
"mDataProp" : "ISADMIN",
"sTitle" : "用户权限",
"sDefaultContent" : "",
"sClass" : "center"
}],
"oLanguage": { //国际化配置
"sProcessing" : "正在获取数据，请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "从 _START_ 到 _END_ 条记录总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(所有记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "搜索",
"sUrl" : "",
"oPaginate": {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
},
"fnRowCallback" : function(nRow, aData, iDisplayIndex) {
/* 用来改写用户权限的 */
if (aData.ISADMIN == '1')
$( 'td:eq(5)', nRow).html('管理员');
if (aData.ISADMIN == '2')
$( 'td:eq(5)', nRow).html('资料下载');
if (aData.ISADMIN == '3')
$( 'td:eq(5)', nRow).html('通常用户');
return nRow;
},
"sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),
//服务器端，数据回调处理
"fnServerData" : function(sSource, aDataSet, fnCallback) {
$.ajax({
"dataType" : 'json',
"type" : "POST",
"url" : sSource,
"data" : aDataSet,
"success" : fnCallback
});
}
});
$( "#docrevisontable tbody").click(function(event) { //当点击表格内某一条记录的时候，会将此记录的cId和cName写入到隐藏域中
$(docrTable.fnSettings().aoData).each( function() {
$( this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass( 'row_selected');
var aData = docrTable.fnGetData(event.target.parentNode);
$( "#userId").val(aData.USERID);
$( "#userN").val(aData.USERNAME);
});
$( '#docrevisontable_filter').html('<span>用户管理列表');
$( '#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="建立"/>');
$( '#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="修改"/>');
$( '#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="删除"/>');
$( '#docrevisontable_filter').append('</span>');
}