datatables 参数详解(转)

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
更多特性请到官网查看

//@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元素（例如增加背景颜色）
  * 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
 $(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"
     });
 });

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

742

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

792

793

794

795

796

797

798

799

800

801

802

803

804

805

806

807

808

809

810

811

812

813

814

815

816

817

818

819

820

821

822

823

824

825

826

827

828

829

830

831

832

833

834

835

836

837

838

839

840

841

842

843

844

845

846

847

848

849

850

851

852

853

854

855

856

857

858

859

860

861

862

863

864

865

866

867

868

869

870

871

872

873

874

875

876

877

878

879

880

881

882

883

884

885

886

887

888

889

890

891

892

893

894

895

896

897

898

899

900

901

902

903

904

905

906

907

908

909

910

911

912

913

914

915

916

917

918

919

920

921

922

923

924

925

926

927

928

929

930

931

932

933

934

935

936

937

938

939

940

941

942

943

944

945

946

947

948

949

950

951

952

953

954

955

956

957

958

959

960

961

962

963

964

965

966

967

968

969

970

971

972

973

974

975

976

977

978

979

980

981

982

983

984

985

986

987

988

989

990

991

992

993

994

995

996

997

998

999

1000

1001

1002

1003

1004

1005

1006

1007

1008

1009

1010

1011

1012

1013

1014

1015

1016

1017

1018

1019

1020

1021

1022

1023

1024

1025

1026

1027

1028

1029

1030

1031

1032

1033

1034

1035

1036

1037

1038

1039

1040

1041

1042

1043

1044

1045

1046

1047

1048

1049

1050

1051

1052

1053

1054

1055

1056

1057

1058

1059

1060

1061

1062

1063

1064

1065

1066

1067

1068

1069

1070

1071

1072

1073

1074

1075

1076

1077

1078

1079

1080

1081

1082

1083

1084

1085

1086

1087

1088

1089

1090

1091

1092

1093

1094

1095

1096

1097

1098

1099

1100

1101

1102

1103

1104

1105

1106

1107

1108

1109

1110

1111

1112

1113

1114

1115

1116

1117

1118

1119

1120

1121

1122

1123

1124

1125

1126

1127

1128

1129

1130

1131

1132

1133

1134

1135

1136

1137

1138

1139

1140

1141

1142

1143

1144

1145

1146

1147

1148

1149

1150

1151

1152

1153

1154

1155

1156

1157

1158

1159

1160

1161

1162

1163

1164

1165

1166

1167

1168

1169

1170

1171

1172

1173

1174

1175

1176

1177

1178

1179

1180

1181

1182

1183

1184

1185

1186

1187

1188

1189

1190

1191

1192

1193

1194

1195

1196

1197

1198

1199

1200

1201

1202

1203

1204

1205

1206

1207

1208

1209

1210

1211

1212

1213

1214

1215

1216

1217

1218

1219

1220

1221

1222

1223

1224

1225

1226

1227

1228

1229

1230

1231

1232

1233

1234

1235

1236

1237

1238

1239

1240

1241

1242

1243

1244

1245

1246

1247

1248

1249

1250

1251

1252

1253

1254

1255

1256

1257

1258

1259

1260

1261

1262

1263

1264

1265

1266

1267

1268

1269

1270

1271

1272

1273

1274

1275

1276

1277

1278

1279

1280

1281

1282

1283

1284

1285

1286

1287

1288

1289

1290

1291

1292

1293

1294

1295

1296

1297

1298

1299

1300

1301

1302

1303

1304

1305

1306

1307

1308

1309

1310

1311

1312

1313

1314

1315

1316

1317

1318

1319

1320

1321

1322

1323

1324

1325

1326

1327

1328

1329

1330

1331

1332

1333

1334

1335

1336

1337

1338

1339

1340

1341

1342

1343

1344

1345

1346

1347

1348

1349

1350

1351

1352

1353

1354

1355

1356

1357

1358

1359

1360

1361

1362

1363

1364

1365

1366

1367

1368

1369

1370

1371

1372

1373

1374

1375

1376

1377

1378

1379

1380

1381

1382

1383

1384

1385

1386

1387

1388

1389

1390

1391

1392

1393

1394

1395

1396

1397

1398

1399

1400

1401

1402

1403

1404

1405

1406

1407

1408

1409

1410

1411

1412

1413

1414

1415

1416

1417

1418

1419

1420

1421

1422

1423

1424

1425

1426

1427

1428

1429

1430

1431

1432

1433

1434

1435

1436

1437

1438

1439

1440

1441

1442

1443

1444

1445

1446

1447

1448

1449

1450

1451

1452

1453

1454

1455

1456

1457

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

] });

});

* 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

] });

});

* 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

]

} );

* 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

] } );

} );

* 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

]

} );

* 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

]

} );

* 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

]

} );

* sContentPadding

* 默认值为空字符串

* 当DataTable计算分配给每一列的列宽的时候，会寻找每一列中最长的字符串，然后构建一个临时表

* 从临时表中读取宽度，这样带来的问题是'mmm'会比'iiii'的长度长很多，但是后者的长度要大

* 这样计算值会出现偏差（正确的处理然后放入DOM对象再测量长度会相当的慢），我们提供了这个选项作为一个解决方法

* 它会把他的值添加到该列最长的值的后面来计算列宽，通常你不需要该属性，该属性也没有被写到DataTables.net的文档中

// Using aoColumns

$(document).ready(function() {

$('#example').dataTable( {

"aoColumns": [

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,

{

"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,

{ "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

]

} );

* 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

]

} );

* 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

]

} );

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

});