jquery dataTable 参数详解

最新推荐文章于 2022-04-12 14:05:00 发布
mj_小军
最新推荐文章于 2022-04-12 14:05:00 发布
阅读量3.4k
点赞数
http://www.360doc.com/content/15/0108/14/8790037_439143305.shtml
    Js代码   
    
  
    1 //@translator codepiano  
    2 //@blog codepiano   
    3 //@email codepiano.li@gmail.com  
    4 //尝试着翻译了一下，难免有错误的地方，欢迎发邮件告知，多谢。  
    5 /*------------------------------------------------Feature------------------------------------------------*/  
    6 $(document).ready( function (){  
    7   $('selector').dataTable( {  
    8     /* 
    9      *  默认为true 
   10      *  是否自动计算列宽，计算列宽会花费一些时间，如果列宽通过aoColumns传递，可以关闭该属性作为优化 
   11      */  
   12     "bAutoWidth":true,  
   13     /* 
   14      *  默认为false 
   15      *  是否延迟渲染，当用Ajax或者js方式加载数据时开启延迟渲染会带来很大的速度提升 
   16      *  当该属性设置为true时，表格每一行新增的元素只有在需要被画出来时才会被DataTable创建出来 
   17      */  
   18     "bDeferRender":false,  
   19     /* 
   20      * 默认为true 
   21      * 是否对数据进行过滤，数据过滤是十分灵活的，允许终端用户输入多个用空格分隔开的关键字 
   22      * 匹配包含这些关键字的行，即使关键字的顺序不是用户输入的顺序，过滤操作会跨列进行匹配，关键字可以分布在一行中不同的列 
   23      * 要注意的是如果你想在DataTable中使用过滤，该选项必须设置为true，如果想移除默认过滤输入框但是保留过滤功能，请设置为false(API没写，推测是false) 
   24      */  
   25     "bFilter":true,  
   26     /* 
   27      * 默认为true 
   28      * 是否显示表格信息，是指当前页面上显示的数据的信息，如果有过滤操作执行，也会显示过滤操作的信息 
   29      */  
   30     "bInfo":true,  
   31     /* 
   32      * 默认为fasle 
   33      * 是否开启jQuery UI ThemeRoller支持，需要一些ThemeRoller使用的标记，这些标记有些与DataTable传统使用的有轻微的差异，有些是额外附加的 
   34      */  
   35     "bJQueryUI":false,  
   36     /* 
   37      * 默认为true 
   38      * 是否允许终端用户从一个选择列表中选择分页的页数，页数为10，25，50和100，需要分页组件bPaginate的支持 
   39      */  
   40     "bLengthChange":false,  
   41     /* 
   42      * 默认为true 
   43      * 是否开启分页功能,即使设置为false,仍然会有一个默认的<前进,后退>分页组件 
   44      */  
   45     "bPaginage":true,  
   46     /* 
   47      * 默认为false 
   48      * 当表格在处理的时候（比如排序操作）是否显示“处理中...” 
   49      * 当表格的数据中的数据过多以至于对其中的记录进行排序时会消耗足以被察觉的时间的时候，该选项会有些用处 
   50      */  
   51     "bProcessing":false,  
   52     /* 
   53      * 默认为false 
   54      * 是否开启不限制长度的滚动条（和sScrollY属性结合使用），不限制长度的滚动条意味着当用户拖动滚动条的时候DataTable会不断加载数据 
   55      * 当数据集十分大的时候会有些用处，该选项无法和分页选项同时使用，分页选项会被自动禁止，注意，额外推荐的滚动条会优先与该选项 
   56      */  
   57     "bScrollInfinite":false,  
   58     /* 
   59      * 默认为false 
   60      * 配置DataTable使用服务器端处理，注意，sAjaxSource参数必须指定，以便给DataTable一个为每一行获取数据的数据源 
   61      */  
   62     "bServerSide":false,  
   63     /* 
   64      * 默认为true 
   65      * 是否开启列排序，对单独列的设置在每一列的bSortable选项中指定 
   66      */  
   67     "bSort":true,  
   68     /* 
   69      * 默认为true 
   70      * 是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class，当该列被排序的时候，可以切换其背景颜色 
   71      * 该选项作为一个来回切换的属性会增加执行时间（当class被移除和添加的时候） 
   72      * 当对大数据集进行排序的时候你或许希望关闭该选项 
   73      */  
   74     "bSortClasses":true,  
   75     /* 
   76      * 默认为false 
   77      * 是否开启状态保存，当选项开启的时候会使用一个cookie保存表格展示的信息的状态，例如分页信息，展示长度，过滤和排序等 
   78      * 这样当终端用户重新加载这个页面的时候可以使用以前的设置 
   79      */  
   80     "bStateSave":false,  
   81     /* 
   82      * 默认为空字符串，即：无效 
   83      * 是否开启水平滚动，当一个表格过于宽以至于无法放入一个布局的时候，或者表格有太多列的时候，你可以开启该选项 
   84      * 从而在一个可横向滚动的视图里面展示表格，该属性可以是css设置，或者一个数字（作为像素量度来使用） 
   85      */  
   86     "sScrollX":"100%",  
   87     /* 
   88      * 默认为空字符串，即：无效 
   89      * 是否开启垂直滚动，垂直滚动会驱使DataTable设置为给定的长度，任何溢出到当前视图之外的数据可以通过垂直滚动进行察看 
   90      * 当在小范围区域中显示大量数据的时候，可以在分页和垂直滚动中选择一种方式，该属性可以是css设置，或者一个数字（作为像素量度来使用） 
   91      */  
   92     "sScrollY":"100%",  
   93     /* 
   94      * 自定义语言设置 
   95      */  
   96     "oLanguage":{  
   97         "oAria":{  
   98         /* 
   99          * 默认值为activate to sort column ascending 
  100          * 当一列被按照升序排序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀（？） 
  101          */  
  102             "sSortAscending": " - click/return to sort ascending",  
  103         /* 
  104          * 默认值为activate to sort column ascending 
  105          * 当一列被按照升序降序的时候添加到表头的ARIA标签，注意列头是这个字符串的前缀（？） 
  106          */  
  107             "sSortDescending": " - click/return to sort descending"  
  108         },  
  109         "oPaginate": {  
  110             /* 
  111              * 默认值为First 
  112              * 当使用全数字类型的分页组件的时候，到第一页按钮上的文字 
  113              */  
  114             "sFirst": "First page",  
  115             /* 
  116              * 默认值为Last 
  117              * 当使用全数字类型的分页组件的时候，到最后一页按钮上的文字 
  118              */  
  119             "sLast": "Last page",  
  120             /* 
  121              * 默认值为Next 
  122              * 当使用全数字类型的分页组件的时候，到下一页按钮上的文字 
  123              */  
  124             "sNext": "Next page",  
  125             /* 
  126              * 默认值为Previous 
  127              * 当使用全数字类型的分页组件的时候，到前一页按钮上的文字 
  128              */  
  129             "sPrevious": "Previous page"  
  130         },  
  131         /* 
  132          * 默认值activate to sort column ascending为 
  133          * 当表格中没有数据（无视因为过滤导致的没有数据）时，该字符串年优先与sZeroRecords显示 
  134          * 注意这是个可选参数，如果没有指定，sZeroRecrods会被使用（既不是默认值也不是给定的值） 
  135          */  
  136         "sEmptyTable": "No data available in table",  
  137         /* 
  138          * 默认值为Showing _START_ to _END_ of _TOTAL_ entries  
  139          * 该属性给终端用户提供当前页面的展示信息，字符串中的变量会随着表格的更新被动态替换，而且可以被任意移动和删除 
  140          */  
  141         "sInfo": "Got a total of _TOTAL_ entries to show (_START_ to _END_)",  
  142         /* 
  143          * 默认值为Showing 0 to 0 of 0 entries  
  144          * 当表格中没有数据时展示的表格信息，通常情况下格式会符合sInfo的格式 
  145          */  
  146         "sInfoEmpty": "No entries to show",  
  147         /* 
  148          * 默认值为(filtered from _MAX_ total entries)  
  149          * 当用户过滤表格中的信息的时候，该字符串会被附加到信息字符串的后面，从而给出过滤器强度的直观概念 
  150          */  
  151         "sInfoFiltered": " - filtering from _MAX_ records",  
  152         /* 
  153          * 默认值为空字符串 
  154          * 使用该属性可以很方便的向表格信息字符串中添加额外的信息，被添加的信息在任何时候都会被附加到表格信息组件的后面 
  155          * sInfoEmpty和sInfoFiltered可以以任何被使用的方式进行结合 
  156          */  
  157         "sInfoPostFix": "All records shown are derived from real information.",  
  158         /* 
  159          * 默认值为',' 
  160          * DataTable有内建的格式化数字的工具，可以用来格式化表格信息中较大的数字 
  161          * 默认情况下会自动调用，可以使用该选项来自定义分割的字符  
  162          */  
  163         "sInfoThousands": "'",  
  164         /* 
  165          * 默认值为Show _MENU_ entries  
  166          * 描述当分页组件的下拉菜单的选项被改变的时候发生的动作，'_MENU_'变量会被替换为默认的10，25，50，100 
  167          * 如果需要的话可以被自定义的下拉组件替换 
  168          */  
  169         "sLengthMenu": "Display _MENU_ records",  
  170         /* 
  171          * 默认值为Loading... 
  172          * 当使用Ajax数据源和表格在第一次被加载搜集数据的时候显示的字符串，该信息在一个空行显示 
  173          * 向终端用户指明数据正在被加载，注意该参数在从服务器加载的时候无效，只有Ajax和客户端处理的时候有效 
  174          */  
  175         "sLoadingRecords": "Please wait - loading...",  
  176         /* 
  177          * 默认值为Processing... 
  178          * 当表格处理用户动作（例如排序或者类似行为）的时候显示的字符串 
  179          */  
  180         "sProcessing": "DataTables is currently busy",  
  181         /* 
  182          * 默认为Search: 
  183          * 描述用户在输入框输入过滤条件时的动作，变量'_INPUT_',如果用在字符串中 
  184          * DataTable会使用用户输入的过滤条件替换_INPUT_为HTML文本组件，从而可以支配它（即用户输入的过滤条件）出现在信息字符串中的位置  
  185          * 如果变量没有指定，用户输入会自动添加到字符串后面 
  186          */  
  187         "sSearch": "Apply filter _INPUT_ to table",  
  188         /* 
  189          * 默认值为空字符串，即：无效 
  190          * 所有语言信息可以被存储在服务器端的文件中，DataTable可以根据该参数指定的URL去寻找 
  191          * 必须保存语言文件的URL信息，必须是JSON格式，对象和初始化中使用的oLanguage对象具有相同的属性 
  192          * 请参考示例文件来了解该参数是如何工作的 
  193          */  
  194         "sUrl": "http://www.sprymedia.co.uk/dataTables/lang.txt",  
  195         /* 
  196          * 默认值为No matching records found 
  197          * 当对数据进行过滤操作后，如果没有要显示的数据，会在表格记录中显示该字符串 
  198          * sEmptyTable只在表格中没有数据的时候显示，忽略过滤操作 
  199          */  
  200         "sZeroRecords": "No records to display"  
  201     }  
  202   });  
  203 });  
  204   
  205 /*------------------------------------------------Options------------------------------------------------*/  
  206 /* 
  207  * bDestroy 
  208  * 默认为false 
  209  * 使用传递的新的初始化对象中的属性构造一个新的表格，并替换一个匹配指定的选择器的表格 
  210  * 如果没有匹配到表格，新的表格会被作为一个普通表格被构建 
  211  */  
  212 $('selector').dataTable({  
  213     "bFilter": false,  
  214     "bDestroy": true  
  215 });  
  216   
  217 /* 
  218  * bRetrieve 
  219  * 默认为false 
  220  * 使用指定的选择器检索表格，注意，如果表格已经被初始化，该参数会直接返回已经被创建的对象 
  221  * 并不会顾及你传递进来的初始化参数对象的变化，将该参数设置为true说明你确认已经明白这一点 
  222  * 如果你需要的话，bDestroy可以用来重新初始化表格 
  223  */  
  224 $(document).ready(function(){  
  225   initTable();  
  226   tableActions();  
  227 });  
  228   
  229 function initTable()  
  230 {  
  231   return $('#example').dataTable( {  
  232     "sScrollY": "200px",  
  233     "bPaginate": false,  
  234     "bRetrieve": true  
  235   });  
  236 }  
  237   
  238 function tableActions()  
  239 {  
  240   var oTable = initTable();  
  241   // perform API operations with oTable   
  242 }  
  243   
  244 /* 
  245  * bScrollAutoCss 
  246  * 默认为true 
  247  * 指明DataTable中滚动的标题元素是否被允许设置内边距和外边距等 
  248  */  
  249 $(document).ready(function(){  
  250   $('#example').dataTable( {  
  251     "bScrollAutoCss": false,  
  252     "sScrollY": "200px"  
  253   });  
  254 });  
  255   
  256 /* 
  257  * bScrollCollapse 
  258  * 默认为false 
  259  * 当垂直滚动被允许的时候，DataTable会强制表格视图在任何时候都是给定的高度（对布局有利） 
  260  * 不过，当把数据集过滤到十分小的时候看起来会很古怪，而且页脚会留在最下面 
  261  * 当结果集的高度比给定的高度小时该参数会使表格高度自适应 
  262  */  
  263 $(document).ready(function(){  
  264   $('#example').dataTable( {  
  265     "sScrollY": "200",  
  266     "bScrollCollapse": true  
  267   });  
  268 });  
  269   
  270 /* 
  271  * bSortCellsTop 
  272  * 默认为false 
  273  * 是否允许DataTable使用顶部（默认为true）的单元格，或者底部（默认为false）的单元格，当使用复合表头的时候会有些用处 
  274  */  
  275 $(document).ready(function(){  
  276   $('#example').dataTable( {  
  277     "bSortCellsTop": true  
  278   });  
  279 });  
  280   
  281 /* 
  282  * iCookieDuration 
  283  * 默认为7200秒（2个小时） 
  284  * 设置用来存储会话信息的cookie的持续时间，单位是秒 
  285  */  
  286 $(document).ready(function(){  
  287   $('#example').dataTable( {  
  288     "iCookieDuration": 60*60*24 // 1 day  
  289   });  
  290 })  
  291   
  292 /* 
  293  * iDeferLoading 
  294  * 默认为null 
  295  * 当选项被开启的时候，DataTable在非加载第一次的时候不会向服务器请求数据，而是会使用页面上的已有数据（不会应用排序等） 
  296  * 因此在加载的时候保留一个XmlHttpRequest，iDeferLoading被用来指明需要延迟加载，而且也用来通知DataTable一个满的表格有多少条数据 
  297  * 信息元素和分页会被正确保留 
  298  */  
  299 $(document).ready(function(){  
  300   $('#example').dataTable( {  
  301     "bServerSide": true,  
  302     "sAjaxSource": "scripts/server_processing.php",  
  303     "iDeferLoading": 57  
  304   });  
  305 });  
  306   
  307 /* 
  308  * iDisplayLength 
  309  * 默认为10 
  310  * 单页显示的数据的条数，如果bLengthChange属性被开启，终端用户可以通过一个弹出菜单重写该数值 
  311  */  
  312 $(document).ready(function(){  
  313   $('#example').dataTable( {  
  314     "bServerSide": true,  
  315     "sAjaxSource": "scripts/server_processing.php",  
  316     "iDeferLoading": 57  
  317   });  
  318 });  
  319   
  320 /* 
  321  * iDisplayStart 
  322  * 默认为0 
  323  * 当开启分页的时候，定义展示的记录的起始序号，不是页数，因此如果你每个分页有10条记录而且想从第三页开始 
  324  * 需要把该参数指定为20 
  325  */  
  326 $(document).ready(function(){  
  327   $('#example').dataTable( {  
  328     "iDisplayStart": 20  
  329   });  
  330 })  
  331   
  332 /* 
  333  * iScrollLoadGap 
  334  * 默认为100 
  335  * 滚动余界是指DataTable在当前页面还有多少条数据可供滚动时自动加载新的数据，你可能希望指定一个足够大的余界 
  336  * 以便滚动加载数据的操作对用户来说是平滑的，同时也不会大到加载比需要的多的多的数据 
  337  */  
  338 $(document).ready(function(){  
  339   $('#example').dataTable( {  
  340     "bScrollInfinite": true,  
  341     "bScrollCollapse": true,  
  342     "sScrollY": "200px",  
  343     "iScrollLoadGap": 50  
  344   });  
  345 });  
  346   
  347 /* 
  348  * iTabIndex 
  349  * 默认为0 
  350  * 默认情况下DataTable允许通过为需要键盘导航的元素添加tabindex属性来进行导航（排序、分页、过滤） 
  351  * 允许你通过tab键切换控制组件，使用回车键去激活他们，默认为0表示按照文档流来切换 
  352  * 如果需要的话，你可以使用该参数重写切换顺序，使用-1来禁止内建的键盘导航 
  353  */  
  354 $(document).ready(function(){  
  355   $('#example').dataTable( {  
  356     "iTabIndex": 1  
  357   });  
  358 });  
  359   
  360 /* 
  361  * oSearch 
  362  * 无默认值 
  363  * 该参数允许你在初始化的时候使用已经定义的全局过滤状态，sSearch对象必须被定义，但是所有的其它选项都是可选的 
  364  * 当bRegex为true的时候，搜索字符串会被当作正则表达式，当为false（默认）的时候，会被直接当作一个字符串 
  365  * 当bSmart为true的时候，DataTable会使用使用灵活过滤策略（匹配任何可能的数据），为false的时候不会这样做 
  366  */  
  367 $(document).ready(function(){  
  368     $('#example').dataTable( {  
  369         "oSearch": {"sSearch": "Initial search"}  
  370     });  
  371 })  
  372   
  373 /* 
  374  * sAjaxDataProp 
  375  * 默认为aaData 
  376  * 当使用Ajax数据源或者服务器端处理的时候，DataTable会默认搜索aaData属性作为数据源 
  377  * 该选项允许变更数据源的名称，你可以使用JavaScript的点号对象表示法去访问多级网状数据源 
  378  */  
  379 // Get data from { "data": [...] }  
  380 $(document).ready(function(){  
  381   var oTable = $('#example').dataTable( {  
  382     "sAjaxSource": "sources/data.txt",  
  383     "sAjaxDataProp": "data"  
  384   });  
  385 });  
  386   
  387 // Get data from { "data": { "inner": [...] } }  
  388 $(document).ready(function(){  
  389   var oTable = $('#example').dataTable( {  
  390     "sAjaxSource": "sources/data.txt",  
  391     "sAjaxDataProp": "data.inner"  
  392   });  
  393 });  
  394   
  395 /* 
  396  * sAjaxSource 
  397  * 默认为null 
  398  * 该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData） 
  399  * 可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源 
  400  */  
  401 $(document).ready(function(){  
  402   $('#example').dataTable( {  
  403     "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"  
  404   });  
  405 })  
  406   
  407 /* 
  408  * sCookiePrefix 
  409  * 默认为SpryMedia_DataTables_ 
  410  * 该参数可以用来重写DataTable默认指定的用来存储状态信息的cookie的前缀 
  411 */  
  412 $(document).ready(function(){  
  413   $('#example').dataTable( {  
  414     "sCookiePrefix": "my_datatable_",  
  415   });  
  416 });  
  417   
  418 /* 
  419  * sDom 
  420  * 默认值为lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) 
  421  * 该初始化属性用来指定你想把各种控制组件注入到dom节点的位置（比如你想把分页组件放到表格的顶部） 
  422  * DIV元素（带或者不带自定的class）可以添加目标样式，下列语法被使用 
  423  *  可供使用的选项 
  424  *      'l' - 长度改变 
  425  *      'f' - 过滤输入 
  426  *      't' - 表格 
  427  *      'i' - 信息 
  428  *      'p' - 分页 
  429  *      'r' - 处理 
  430  *  可供使用的常量 
  431  *      'H' - jQueryUI theme "header" classes('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix') 
  432  *      'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix') 
  433  *  需要的语法 
  434  *      '<' 和 '>' - div元素 
  435  *      '<"class" and '>' - 带有class属性的div元素 
  436  *      '<"#id" and '>' - 带有id属性的div元素 
  437  *  例子 
  438  *      '<"wrapper"flipt>' 
  439  *      '<lf<t>ip>' 
  440  */  
  441 $(document).ready(function(){  
  442   $('#example').dataTable( {  
  443     "sDom": '<"top"i>rt<"bottom"flp><"clear"&lgt;'  
  444   });  
  445 });  
  446   
  447 /* 
  448  * sPaginationType 
  449  * 默认为two_button 
  450  * DataTable内建了两种交互式分页策略，两个按钮和全页数，展现给终端用户不同的控制方式 
  451  * 可以通过API增加策略 
  452  */  
  453 $(document).ready(function(){  
  454     $('#example').dataTable( {  
  455         "sPaginationType": "full_numbers"  
  456     });  
  457 })  
  458   
  459 /* 
  460  * sScrollXInner 
  461  * 默认为空字符串，即：无效 
  462  * 当横向滚动可用的时候，该属性可以用来强制DataTable的宽度比需要的更长 
  463  * 比如你需要表格彼此相隔适宜，该变量可以用来使表格变大，而且强制滚动 
  464  * 该该属性可以是css设置，或者一个数字（作为像素量度来使用） 
  465  */  
  466 $(document).ready(function(){  
  467     $('#example').dataTable( {  
  468         "sScrollX": "100%",  
  469         "sScrollXInner": "110%"  
  470     });  
  471 });  
  472   
  473 /* 
  474  * sServerMethod 
  475  * 默认值为GET 
  476  * 设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式 
  477  */  
  478 $(document).ready(function(){  
  479     $('#example').dataTable({  
  480         "bServerSide": true,  
  481         "sAjaxSource": "scripts/post.php",  
  482         "sServerMethod": "POST"  
  483     });  
  484 });  
  485 /*------------------------------------------------Callback------------------------------------------------*/  
  486 /* 
  487  * fnCookieCallback 
  488  * 无默认值 
  489  * 当DataTable的状态保留可用时，自定义被保存的cookie和参数。只要cookie被修改就会调用此方法 
  490  * 该方法需要返回一个格式良好的cookie字符串，注意数据对象是以Javascript对象的形式传递进来的，必须转换成字符串，例如JSON格式 
  491  */  
  492 $(document).ready(function (){  
  493   $('#example').dataTable({  
  494     "fnCookieCallback": function (sName, oData, sExpires, sPath) {  
  495       // Customise oData or sName or whatever else here  
  496       return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;  
  497     }  
  498   });  
  499 });  
  500   
  501 /* 
  502  * fnCreatedRow 
  503  * 无默认值 
  504  * 当一个新的TR元素（并且所有TD子元素被插入）被创建或者被作为一个DOM资源被注册时调用该函数 
  505  * 允许操作该TR元素 
  506  */  
  507 $(document).ready(function(){  
  508     $('#example').dataTable({  
  509         "fnCreatedRow": function( nRow, aData, iDataIndex ){  
  510             // Bold the grade for all 'A' grade browsers  
  511             if ( aData[4] == "A" )  
  512     {  
  513         $('td:eq(4)', nRow).html( '<b>A</b>' );  
  514     }  
  515         }  
  516     });  
  517 });  
  518   
  519 /* 
  520  * fnDrawCallback 
  521  * 无默认值 
  522  * 每当draw事件发生时调用该函数，允许你动态编辑新建的dom对象的任何属性 
  523  */  
  524 $(document).ready( function(){  
  525     $('#example').dataTable({  
  526         "fnDrawCallback": function(){  
  527             alert( 'DataTables has redrawn the table' );  
  528         }  
  529     });  
  530 });  
  531   
  532 /* 
  533  * fnFooterCallback 
  534  * 无默认值 
  535  * 与fnHeaderCallback()完全相同，只是该函数允许你在每一个draw时间发生时修改页脚 
  536  */  
  537 $(document).ready( function(){  
  538     $('#example').dataTable({  
  539         "fnDrawCallback": function() {  
  540             alert( 'DataTables has redrawn the table' );  
  541         }  
  542     });  
  543 });  
  544   
  545 /* 
  546  * fnFormatNumber 
  547  * 无默认值 
  548  * 当渲染表格信息（例如：显示57条记录中的1-10条）中大的数字时 
  549  * 为了方便用户，DataTable会使用逗号分割每千单位（例如1000000会被渲染为1,000,000） 
  550  * 该函数会重写DataTable默认使用的策略 
  551  */  
  552 $(document).ready(function(){  
  553   $('#example').dataTable({  
  554     "fnFormatNumber": function ( iIn ) {  
  555       if ( iIn < 1000 ) {  
  556         return iIn;  
  557       } else {  
  558         var  
  559           s=(iIn+""),  
  560           a=s.split(""), out="",  
  561           iLen=s.length;  
  562   
  563         for ( var i=0 ; i<iLen ; i++ ) {  
  564           if ( i%3 === 0 && i !== 0 ) {  
  565             out = "'"+out;  
  566           }  
  567           out = a[iLen-i-1]+out;  
  568         }  
  569       }  
  570       return out;  
  571     };  
  572   });  
  573 });  
  574   
  575 /* 
  576  * fnHeaderCallback 
  577  * 无默认值 
  578  * 每当draw事件发生时调用该函数，允许你动态编辑表头行，可以用来计算和展示关于表格的有用的信息 
  579  */  
  580 $(document).ready(function(){  
  581     $('#example').dataTable({  
  582         "fnFormatNumber": function ( iIn ) {  
  583             if ( iIn < 1000 ) {  
  584                 return iIn;  
  585             } else {  
  586                 var  
  587         s=(iIn+""),  
  588         a=s.split(""), out="",  
  589         iLen=s.length;  
  590   
  591     for ( var i=0 ; i<iLen ; i++ ) {  
  592         if ( i%3 === 0 && i !== 0 ) {  
  593             out = "'"+out;  
  594         }  
  595         out = a[iLen-i-1]+out;  
  596     }  
  597             }  
  598             return out;  
  599         };  
  600     });  
  601 });  
  602   
  603 /* 
  604  * fnInfoCallback 
  605  * 无默认值 
  606  * 信息元素可以用来传输表格当前状态的信息，尽管DataTable提供的国际化的选项在处理大多数自定义情况时已经相当方便了 
  607  * 或许你有时仍然希望自定义深层的字符串,该函数会满足你的需要 
  608  */  
  609 $('#example').dataTable( {  
  610     "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {  
  611         return iStart +" to "+ iEnd;  
  612     }  
  613 });  
  614   
  615 /* 
  616  * fnInitComplete 
  617  * 无默认值 
  618  * 当表格被初始化后调用该函数，通常DataTable会被持续初始化，并不需要该函数 
  619  * 可是，当使用异步的XmlHttpRequest从外部获得语言信息时，初始化并不是持续的 
  620  */  
  621 $(document).ready( function(){  
  622     $('#example').dataTable({  
  623         "fnInitComplete": function(oSettings, json) {  
  624             alert( 'DataTables has finished its initialisation.' );  
  625         }  
  626     });  
  627 })  
  628   
  629 /* 
  630  * fnPreDrawCallback 
  631  * 无默认值 
  632  * 在每一个表格draw事件发生前调用该函数，通过返回false来取消draw事件 
  633  * 其它任何的返回值，包括undefined都会导致draw事件的发生 
  634  */  
  635 $(document).ready( function(){  
  636     $('#example').dataTable({  
  637         "fnPreDrawCallback": function( oSettings ) {  
  638             if ( $('#test').val() == 1 ) {  
  639                 return false;  
  640             }  
  641         }  
  642     });  
  643 });  
  644   
  645 /* 
  646  * fnRowCallback 
  647  * 无默认值 
  648  * 你可以通过该函数在每一个表格绘制事件发生之后，渲染到屏幕上之前，向表格里的每一行传递'处理过程' 
  649  * 该函数可以用来设置行的class名字等 
  650  */  
  651 $(document).ready(function(){  
  652     $('#example').dataTable({  
  653         "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {  
  654             // Bold the grade for all 'A' grade browsers  
  655             if ( aData[4] == "A" )  
  656     {  
  657         $('td:eq(4)', nRow).html( '<b>A</b>' );  
  658     }  
  659         }  
  660     });  
  661 });  
  662   
  663 /* 
  664  * fnServerData 
  665  * 无默认值 
  666  * 你可以使用该参数重写从服务器获取数据的方法（$.getJSON）,从而使其更适合你的应用 
  667  * 例如你可以使用POST方式提交，或者从Google Gears或者AIR数据库获取数据 
  668  */  
  669 // POST data to server  
  670 $(document).ready(function(){  
  671     $('#example').dataTable( {  
  672         "bProcessing": true,  
  673         "bServerSide": true,  
  674         "sAjaxSource": "xhr.php",  
  675         "fnServerData": function ( sSource, aoData, fnCallback ) {  
  676             $.ajax( {  
  677                 "dataType": 'json',  
  678             "type": "POST",  
  679             "url": sSource,  
  680             "data": aoData,  
  681             "success": fnCallback  
  682             } );  
  683         }  
  684     });  
  685 });  
  686   
  687 /* 
  688  * fnServerParams 
  689  * 无默认值 
  690  * 用来在向服务器发送Ajax请求时发送额外的数据，例如自定义的过滤信息，该函数使向服务器发送额外参数变得简单 
  691  * 传递进来的参数是DataTable建立的数据集合，你可以根据需要添加或者修改该集合 
  692  */  
  693 $(document).ready(function(){  
  694     $('#example').dataTable( {  
  695         "bProcessing": true,  
  696         "bServerSide": true,  
  697         "sAjaxSource": "scripts/server_processing.php",  
  698         "fnServerParams": function ( aoData ) {  
  699             aoData.push( { "name": "more_data", "value": "my_value" } );  
  700         }  
  701     });  
  702 });  
  703   
  704 /* 
  705  * fnStateLoad 
  706  * 无默认值 
  707  * 加载表格状态，使用该函数你可以定义状态信息加载的位置和方式，默认情况下DataTable会从cookie中加载 
  708  * 不过你或许希望使用本地存储（HTML5支持），或者服务端数据库 
  709  */  
  710 $(document).ready(function(){  
  711     $('#example').dataTable({  
  712         "bStateSave": true,  
  713         "fnStateSave": function (oSettings, oData) {  
  714             var o;  
  715   
  716             // Send an Ajax request to the server to get the data. Note that  
  717             // this is a synchronous request.  
  718             $.ajax( {  
  719                 "url": "/state_load",  
  720                 "async": false,  
  721                 "dataType": "json",  
  722                 "success": function (json) {  
  723                     o = json;  
  724                 }  
  725             } );  
  726             return o;  
  727         }  
  728     });  
  729 });  
  730   
  731 /* 
  732  * fnStateLoadParams 
  733  * 无默认值 
  734  * 该回调可以用来在加载状态信息之前编辑状态信息 
  735  * 函数在表格从存储的数据加载状态信息时调用，在表格<当前使用的设置对象>被<从保存信息中加载的设置对象>修改以前调用 
  736  * 注意作为插件开发者，你应该使用'stateLoadParams'事件去加载plug-in的参数 
  737  */  
  738 // Remove a saved filter, so filtering is never loaded  
  739 $(document).ready(function(){  
  740     $('#example').dataTable({  
  741         "bStateSave": true,  
  742         "fnStateLoadParams": function (oSettings, oData) {  
  743             oData.oFilter.sSearch = "";  
  744         });  
  745     });  
  746   
  747   
  748 // Disallow state loading by returning false  
  749 $(document).ready(function(){  
  750     $('#example').dataTable({  
  751         "bStateSave": true,  
  752         "fnStateLoadParams": function (oSettings, oData) {  
  753             return false;  
  754         });  
  755     });  
  756   
  757 /* 
  758  * fnStateLoaded 
  759  * 无默认值 
  760  * 在表格状态被状态存储方法读取和DataTable设置对象被修改时调用，作为被状态信息被加载的结果 
  761  */  
  762 // Show an alert with the filtering value that was saved  
  763 $(document).ready(function(){  
  764     $('#example').dataTable({  
  765         "bStateSave": true,  
  766         "fnStateLoaded": function (oSettings, oData) {  
  767             alert( 'Saved filter was: '+oData.oFilter.sSearch );  
  768         });  
  769     });  
  770   
  771 /* 
  772  * fnStateSave 
  773  * 无默认值 
  774  * 保存表格状态，使用该函数你可以定义状态信息保存的位置和方式，默认情况下DataTable会保存在cookie中 
  775  * 不过你或许希望使用本地存储（HTML5支持），或者服务端数据库 
  776  */  
  777 $(document).ready(function(){  
  778     $('#example').dataTable({  
  779         "bStateSave": true,  
  780         "fnStateSave": function (oSettings, oData) {  
  781             // Send an Ajax request to the server with the state object  
  782             $.ajax( {  
  783                 "url": "/state_save",  
  784             "data": oData,  
  785             "dataType": "json",  
  786             "method": "POST"  
  787                 "success": function () {}  
  788             });  
  789         }  
  790     });  
  791 });  
  792   
  793 /* 
  794  * fnStateSaveParams 
  795  * 无默认值 
  796  * 该回调允许你编辑被保存的状态信息，在表格改变了状态信息需要保存的时候调用 
  797  * 可以使用该回调在保存状态信息的对象被保存以前对其进行修改，包括添加或者其它状态属性或者修改 
  798  */  
  799 // Remove a saved filter, so filtering is never saved  
  800 $(document).ready(function(){  
  801     $('#example').dataTable({  
  802         "bStateSave": true,  
  803         "fnStateLoadParams": function (oSettings, oData) {  
  804             oData.oFilter.sSearch = "";  
  805         });  
  806     });  
  807 /*------------------------------------------------Columns------------------------------------------------*/  
  808 /* 
  809  * aDataSort 
  810  * 默认为null,自动使用列序号作为默认 
  811  * 在排序一列的时候同时将其它几列也排序，例如名和姓作为多列排序 
  812  */  
  813 // Using aoColumnDefs  
  814 $(document).ready(function(){  
  815     $('#example').dataTable({  
  816         "aoColumnDefs": [  
  817     { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] },  
  818         { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] },  
  819         { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] }  
  820     ]  
  821     });  
  822 });  
  823   
  824   
  825 // Using aoColumns  
  826 $(document).ready(function(){  
  827     $('#example').dataTable({  
  828         "aoColumns": [  
  829     { "aDataSort": [ 0, 1 ] },  
  830         { "aDataSort": [ 1, 0 ] },  
  831         { "aDataSort": [ 2, 3, 4 ] },  
  832         null,  
  833         null  
  834         ]  
  835     });  
  836 });  
  837   
  838 /* 
  839  * asSorting 
  840  * 默认为[ 'asc', 'desc' ]  
  841  * 你可以通过该参数控制默认排序的方向，甚至改变排序处理器的行为（例如：只允许升序排序） 
  842  */  
  843 // Using aoColumnDefs  
  844 $(document).ready(function(){  
  845     $('#example').dataTable({  
  846         "aoColumnDefs": [  
  847     { "asSorting": [ "asc" ], "aTargets": [ 1 ] },  
  848         { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] },  
  849         { "asSorting": [ "desc" ], "aTargets": [ 3 ] }  
  850     ]  
  851     });  
  852 });  
  853   
  854   
  855 // Using aoColumns  
  856 $(document).ready(function(){  
  857     $('#example').dataTable( {  
  858         "aoColumns": [  
  859         null,  
  860         { "asSorting": [ "asc" ] },  
  861         { "asSorting": [ "desc", "asc", "asc" ] },  
  862         { "asSorting": [ "desc" ] },  
  863         null  
  864         ]  
  865     });  
  866 });  
  867   
  868 /* 
  869  * bSearchable 
  870  * 默认为true 
  871  * 是否在列上应用过滤 
  872  */  
  873 // Using aoColumnDefs  
  874 $(document).ready(function(){  
  875     $('#example').dataTable({  
  876         "aoColumnDefs": [  
  877     { "bSearchable": false, "aTargets": [ 0 ] }  
  878     ]} );  
  879 });  
  880   
  881   
  882 // Using aoColumns  
  883 $(document).ready(function(){  
  884     $('#example').dataTable({  
  885         "aoColumns": [  
  886     { "bSearchable": false },  
  887         null,  
  888         null,  
  889         null,  
  890         null  
  891         ] });  
  892 });  
  893   
  894 /* 
  895  * bSortable 
  896  * 默认为true 
  897  * 是否在某一列上开启排序 
  898  */  
  899 // Using aoColumnDefs  
  900 $(document).ready(function(){  
  901     $('#example').dataTable({  
  902         "aoColumnDefs": [  
  903     { "bSortable": false, "aTargets": [ 0 ] }  
  904     ] });  
  905 });  
  906   
  907   
  908 // Using aoColumns  
  909 $(document).ready(function(){  
  910     $('#example').dataTable( {  
  911         "aoColumns": [  
  912     { "bSortable": false },  
  913         null,  
  914         null,  
  915         null,  
  916         null  
  917         ] });  
  918 });  
  919   
  920 /* 
  921  * bUseRendered 
  922  * 默认为true 
  923  * 当对一列使用使用fnRender时，你或许希望使用原始的数据（渲染以前）去排序或者过滤（默认是使用用户看到的渲染过的数据） 
  924  * 或许对日期类型有些用处，注意，现在建议使用mDataProp作为函数并且使用该函数提供的type参数，来允许不同的数据被用来排序，过滤，展现和类型检测 
  925  */  
  926 // Using aoColumnDefs  
  927 $(document).ready(function() {  
  928     $('#example').dataTable( {  
  929         "aoColumnDefs": [  
  930     {  
  931         "fnRender": function ( oObj ) {  
  932             return oObj.aData[0] +' '+ oObj.aData[3];  
  933         },  
  934         "bUseRendered": false,  
  935         "aTargets": [ 0 ]  
  936     }  
  937     ]  
  938     } );  
  939 } );  
  940   
  941 // Using aoColumns  
  942 $(document).ready(function() {  
  943     $('#example').dataTable( {  
  944         "aoColumns": [  
  945     {  
  946         "fnRender": function ( oObj ) {  
  947             return oObj.aData[0] +' '+ oObj.aData[3];  
  948         },  
  949         "bUseRendered": false  
  950     },  
  951         null,  
  952         null,  
  953         null,  
  954         null  
  955         ]  
  956     } );  
  957 } );  
  958   
  959 /* 
  960  * bVisible 
  961  * 默认值为true 
  962  * 是否展示某一列 
  963  */  
  964 // Using aoColumnDefs  
  965 $(document).ready(function() {  
  966     $('#example').dataTable( {  
  967         "aoColumnDefs": [  
  968     { "bVisible": false, "aTargets": [ 0 ] }  
  969     ] } );  
  970 } );  
  971   
  972   
  973 // Using aoColumns  
  974 $(document).ready(function() {  
  975     $('#example').dataTable( {  
  976         "aoColumns": [  
  977     { "bVisible": false },  
  978         null,  
  979         null,  
  980         null,  
  981         null  
  982         ] } );  
  983 } );  
  984   
  985 /* 
  986  * fnCreatedCell 
  987  * 无默认值 
  988  * 每当新的单元格被建立（Ajax源等）或者处理输入（DOM源）时，开发者可定义的函数会被调用 
  989  * 该属性用作fnRender的补充来允许你修改在fnRender函数调用之后新建的DOM元素（例如增加背景颜色） 
  990  */  
  991 $(document).ready(function() {  
  992     $('#example').dataTable( {  
  993         "aoColumnDefs": [ {  
  994             "aTargets": [3],  
  995         "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {  
  996             if ( sData == "1.7" ) {  
  997                 $(nTd).css('color', 'blue')  
  998             }  
  999         }  
 1000         } ]  
 1001     });  
 1002 } );  
 1003   
 1004 /* 
 1005  * fnRender 
 1006  * 无默认值 
 1007  * 自定义列中每个单元格被展示的时候调用的展示函数 
 1008  */  
 1009 // Using aoColumnDefs  
 1010 $(document).ready(function() {  
 1011     $('#example').dataTable( {  
 1012         "aoColumnDefs": [  
 1013     {  
 1014         "fnRender": function ( o, val ) {  
 1015             return o.aData[0] +' '+ o.aData[3];  
 1016         },  
 1017         "aTargets": [ 0 ]  
 1018     }  
 1019     ]  
 1020     } );  
 1021 } );  
 1022   
 1023   
 1024 // Using aoColumns  
 1025 $(document).ready(function() {  
 1026     $('#example').dataTable( {  
 1027         "aoColumns": [  
 1028     { "fnRender": function ( o, val ) {  
 1029                                           return o.aData[0] +' '+ o.aData[3];  
 1030                                       } },  
 1031         null,  
 1032         null,  
 1033         null,  
 1034         null  
 1035         ]  
 1036     } );  
 1037 } );  
 1038   
 1039 /* 
 1040  * iDataSort 
 1041  * 默认值为-1，使用自动计算的列标 
 1042  * 当选择该列进行排序的时候，你希望调用排序操作的列的列号，该参数可以用来按隐藏列排序 
 1043  */  
 1044 // Using aoColumnDefs  
 1045 $(document).ready(function() {  
 1046     $('#example').dataTable( {  
 1047         "aoColumnDefs": [  
 1048     { "iDataSort": 1, "aTargets": [ 0 ] }  
 1049     ]  
 1050     } );  
 1051 } );  
 1052   
 1053 // Using aoColumns  
 1054 $(document).ready(function() {  
 1055     $('#example').dataTable( {  
 1056         "aoColumns": [  
 1057     { "iDataSort": 1 },  
 1058         null,  
 1059         null,  
 1060         null,  
 1061         null  
 1062         ]  
 1063     } );  
 1064 } );  
 1065   
 1066 /* 
 1067  * mDataProp 
 1068  * 默认为null,使用自动计算的列标 
 1069  * 该属性可以从任何JSON格式数据源读取属性，包括深层网状的对象和属性， 
 1070  * 有几种不同的传递方式可以影响mDataProp的行为 
 1071  * 整型：被当作数据源的数组下表，是DataTable使用的默认行为（每列递增） 
 1072  * 字符串类型：被当作从数据源获取的对象的属性名，注意你可以使用Javascript点号访问符去访问深层次的属性或数组 
 1073  * null：sDafaultContent选项会被使用到单元格上，（默认是空字符串，当生成可编辑列、可删除列的时候可以使用该属性） 
 1074  * 函数：当表格获取或者设置单元格时被调用的函数，函数有三个参数 
 1075  *      {array|object}:该行的数据源 
 1076  *      {string}:调用数据请求的类型，设置数据时是'set'，收集数据时是'filter','display','type','sort' 
 1077  *      {*}:当第二个参数是set的时候，要被设置的数据 
 1078  *      当类型是'set'的时候，该函数不需要返回一个值，除此之外，返回值是可以用来请求数据的 
 1079  */  
 1080 // Read table data from objects  
 1081 $(document).ready(function() {  
 1082     var oTable = $('#example').dataTable( {  
 1083         "sAjaxSource": "sources/deep.txt",  
 1084         "aoColumns": [  
 1085     { "mDataProp": "engine" },  
 1086         { "mDataProp": "browser" },  
 1087         { "mDataProp": "platform.inner" },  
 1088         { "mDataProp": "platform.details.0" },  
 1089         { "mDataProp": "platform.details.1" }  
 1090     ]  
 1091     } );  
 1092 } );  
 1093   
 1094   
 1095 // Using mDataProp as a function to provide different information for  
 1096 // sorting, filtering and display. In this case, currency (price)  
 1097 $(document).ready(function() {  
 1098     var oTable = $('#example').dataTable( {  
 1099         "aoColumnDefs": [  
 1100     {  
 1101         "aTargets": [ 0 ],  
 1102         "mDataProp": function ( source, type, val ) {  
 1103             if (type === 'set') {  
 1104                 source.price = val;  
 1105                 // Store the computed dislay and filter values for efficiency  
 1106                 source.price_display = val=="" ? "" : "$"+numberFormat(val);  
 1107                 source.price_filter  = val=="" ? "" : "$"+numberFormat(val)+" "+val;  
 1108                 return;  
 1109             }  
 1110             else if (type === 'display') {  
 1111                 return source.price_display;  
 1112             }  
 1113             else if (type === 'filter') {  
 1114                 return source.price_filter;  
 1115             }  
 1116     // 'sort' and 'type' both just use the integer  
 1117     return source.price;  
 1118         }  
 1119     ]  
 1120     } );  
 1121     } );  
 1122   
 1123 /* 
 1124  * sClass 
 1125  * 默认值为空字符串 
 1126  * 该列的每一个单元格被赋予的class 
 1127  */  
 1128 // Using aoColumnDefs  
 1129 $(document).ready(function() {  
 1130     $('#example').dataTable( {  
 1131         "aoColumnDefs": [  
 1132     { "sClass": "my_class", "aTargets": [ 0 ] }  
 1133     ]  
 1134     } );  
 1135 } );  
 1136   
 1137 // Using aoColumns  
 1138 $(document).ready(function() {  
 1139     $('#example').dataTable( {  
 1140         "aoColumns": [  
 1141     { "sClass": "my_class" },  
 1142         null,  
 1143         null,  
 1144         null,  
 1145         null  
 1146         ]  
 1147     } );  
 1148 } );  
 1149   
 1150 /* 
 1151  * sContentPadding 
 1152  * 默认值为空字符串 
 1153  * 当DataTable计算分配给每一列的列宽的时候，会寻找每一列中最长的字符串，然后构建一个临时表 
 1154  * 从临时表中读取宽度，这样带来的问题是'mmm'会比'iiii'的长度长很多，但是后者的长度要大 
 1155  * 这样计算值会出现偏差（正确的处理然后放入DOM对象再测量长度会相当的慢），我们提供了这个选项作为一个解决方法 
 1156  * 它会把他的值添加到该列最长的值的后面来计算列宽，通常你不需要该属性，该属性也没有被写到DataTables.net的文档中 
 1157  */  
 1158 // Using aoColumns  
 1159 $(document).ready(function() {  
 1160   $('#example').dataTable( {  
 1161     "aoColumns": [  
 1162       null,  
 1163       null,  
 1164       null,  
 1165       {  
 1166         "sContentPadding": "mmm"  
 1167       }  
 1168     ]  
 1169   } );  
 1170 } );  
 1171   
 1172 /* 
 1173  * sDefaultContent 
 1174  * 默认为空字符串 
 1175  * 允许给列值一个默认值，只要发现null值就会显示默认值 
 1176  * 可以由mDataProp设置为null或者数据源是null引起 
 1177  */  
 1178 // Using aoColumnDefs  
 1179 $(document).ready(function() {  
 1180     $('#example').dataTable( {  
 1181         "aoColumnDefs": [  
 1182     {  
 1183         "mDataProp": null,  
 1184         "sDefaultContent": "Edit",  
 1185         "aTargets": [ -1 ]  
 1186     }  
 1187     ]  
 1188     } );  
 1189 } );  
 1190   
 1191   
 1192 // Using aoColumns  
 1193 $(document).ready(function() {  
 1194     $('#example').dataTable( {  
 1195         "aoColumns": [  
 1196         null,  
 1197         null,  
 1198         null,  
 1199         {  
 1200             "mDataProp": null,  
 1201         "sDefaultContent": "Edit"  
 1202         }  
 1203     ]  
 1204     } );  
 1205 } );  
 1206   
 1207 /* 
 1208  * sName 
 1209  * 默认值为空字符串 
 1210  * 该参数只有使用在服务器端处理的时候调用，在了解客户端展示了哪些列的时候十分有用 
 1211  * 然后与数据库字段建立映射，当被定义时，如果服务器端返回的信息的顺序不是期望的顺序，也可以使用名字去区分 
 1212  * 使用这种方式的好处是：用户在客户端交换了列，你的服务器端代码不用更新 
 1213  */  
 1214 // Using aoColumnDefs  
 1215 $(document).ready(function() {  
 1216     $('#example').dataTable( {  
 1217         "aoColumnDefs": [  
 1218     { "sName": "engine", "aTargets": [ 0 ] },  
 1219         { "sName": "browser", "aTargets": [ 1 ] },  
 1220         { "sName": "platform", "aTargets": [ 2 ] },  
 1221         { "sName": "version", "aTargets": [ 3 ] },  
 1222         { "sName": "grade", "aTargets": [ 4 ] }  
 1223     ]  
 1224     } );  
 1225 } );  
 1226   
 1227   
 1228 // Using aoColumns  
 1229 $(document).ready(function() {  
 1230     $('#example').dataTable( {  
 1231         "aoColumns": [  
 1232     { "sName": "engine" },  
 1233         { "sName": "browser" },  
 1234         { "sName": "platform" },  
 1235         { "sName": "version" },  
 1236         { "sName": "grade" }  
 1237     ]  
 1238     } );  
 1239 } );  
 1240   
 1241 /* 
 1242  * sSortDataType 
 1243  * 默认值为std 
 1244  * 为排序操作定义可以用来在排序前读取实时表格信息（更新内部缓存版本）的数据源的类型 
 1245  * 允许排序事件发生在用户可编辑的元素上，例如输入框 
 1246  */  
 1247 // Using aoColumnDefs  
 1248 $(document).ready(function() {  
 1249     $('#example').dataTable( {  
 1250         "aoColumnDefs": [  
 1251     { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },  
 1252         { "sType": "numeric", "aTargets": [ 3 ] },  
 1253         { "sSortDataType": "dom-select", "aTargets": [ 4 ] },  
 1254         { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }  
 1255     ]  
 1256     } );  
 1257 } );  
 1258   
 1259   
 1260 // Using aoColumns  
 1261 $(document).ready(function() {  
 1262     $('#example').dataTable( {  
 1263         "aoColumns": [  
 1264         null,  
 1265         null,  
 1266         { "sSortDataType": "dom-text" },  
 1267         { "sSortDataType": "dom-text", "sType": "numeric" },  
 1268         { "sSortDataType": "dom-select" },  
 1269         { "sSortDataType": "dom-checkbox" }  
 1270     ]  
 1271     } );  
 1272 } );  
 1273   
 1274 /* 
 1275  * sTitle 
 1276  * 默认值为null,从TH标签读取 
 1277  * 列名 
 1278  */  
 1279 // Using aoColumnDefs  
 1280 $(document).ready(function() {  
 1281     $('#example').dataTable( {  
 1282         "aoColumnDefs": [  
 1283     { "sTitle": "My column title", "aTargets": [ 0 ] }  
 1284     ]  
 1285     } );  
 1286 } );  
 1287   
 1288   
 1289 // Using aoColumns  
 1290 $(document).ready(function() {  
 1291     $('#example').dataTable( {  
 1292         "aoColumns": [  
 1293     { "sTitle": "My column title" },  
 1294         null,  
 1295         null,  
 1296         null,  
 1297         null  
 1298         ]  
 1299     } );  
 1300 } );  
 1301   
 1302 /* 
 1303  * sType 
 1304  * 默认值为null,从弱引用数据中自动判断 
 1305  * 允许你指定该列数据按什么类型来排序，目前有四种类型（字符串，数字，日期和html（在排序前会自动除去HTML标记））可选 
 1306  * 注意只有能够被Javascript的Date对象接受的格式化日期字符串才会被当作日期类型接受，例如"Mar 26, 2008 5:03 PM" 
 1307  * 默认是使用html类型，更多类型可以通过插件添加 
 1308  */  
 1309 // Using aoColumnDefs  
 1310 $(document).ready(function() {  
 1311     $('#example').dataTable( {  
 1312         "aoColumnDefs": [  
 1313     { "sType": "html", "aTargets": [ 0 ] }  
 1314     ]  
 1315     } );  
 1316 } );  
 1317   
 1318   
 1319 // Using aoColumns  
 1320 $(document).ready(function() {  
 1321     $('#example').dataTable( {  
 1322         "aoColumns": [  
 1323     { "sType": "html" },  
 1324         null,  
 1325         null,  
 1326         null,  
 1327         null  
 1328         ]  
 1329     } );  
 1330 } );  
 1331   
 1332 /* 
 1333  * sWidth 
 1334  * 默认值为null,自动的 
 1335  * 定义列的宽度，该参数可以接受CSS定义（3em,20px等），DataTable对没有通过该接口指定宽度的列使用灵活宽度 
 1336  * 从而保证表格是可被读的 
 1337  */  
 1338 // Using aoColumnDefs  
 1339 $(document).ready(function() {  
 1340     $('#example').dataTable( {  
 1341         "aoColumnDefs": [  
 1342     { "sWidth": "20%", "aTargets": [ 0 ] }  
 1343     ]  
 1344     } );  
 1345 } );  
 1346   
 1347   
 1348 // Using aoColumns  
 1349 $(document).ready(function() {  
 1350     $('#example').dataTable( {  
 1351         "aoColumns": [  
 1352     { "sWidth": "20%" },  
 1353         null,  
 1354         null,  
 1355         null,  
 1356         null  
 1357         ]  
 1358     } );  
 1359 } );  
 1360 /*------------------------------------------------ServerSide------------------------------------------------*/  
 1361 /* 
 1362  * bServerSide 
 1363  * 默认值false 
 1364  * 配置使用服务器端处理的DataTable，注意sAjaxSource参数必须指定，以便给DataTable一个获取每行数据的数据源 
 1365  */  
 1366 $(document).ready( function () {  
 1367     $('#example').dataTable( {  
 1368         "bServerSide": true,  
 1369         "sAjaxSource": "xhr.php"  
 1370     } );  
 1371 } );  
 1372 /* 
 1373  * fnServerData 
 1374  * 无默认值 
 1375  * 你可以使用该参数重写从服务器获取数据的方法（$.getJSON）,从而使其更适合你的应用 
 1376  * 例如你可以使用POST方式提交，或者从Google Gears或者AIR数据库获取数据 
 1377  */  
 1378 // POST data to server  
 1379 $(document).ready(function() {  
 1380     $('#example').dataTable( {  
 1381         "bProcessing": true,  
 1382         "bServerSide": true,  
 1383         "sAjaxSource": "xhr.php",  
 1384         "fnServerData": function ( sSource, aoData, fnCallback ) {  
 1385             $.ajax( {  
 1386                 "dataType": 'json',  
 1387             "type": "POST",  
 1388             "url": sSource,  
 1389             "data": aoData,  
 1390             "success": fnCallback  
 1391             } );  
 1392         }  
 1393     } );  
 1394 } );  
 1395 /* 
 1396  * fnServerParams 
 1397  * 无默认值 
 1398  * 用来在向服务器发送Ajax请求时发送额外的数据，例如自定义的过滤信息，该函数使向服务器发送额外参数变得简单 
 1399  * 传递进来的参数是DataTable建立的数据集合，你可以根据需要添加或者修改该集合 
 1400  */  
 1401 $(document).ready(function() {  
 1402     $('#example').dataTable( {  
 1403         "bProcessing": true,  
 1404         "bServerSide": true,  
 1405         "sAjaxSource": "scripts/server_processing.php",  
 1406         "fnServerParams": function ( aoData ) {  
 1407             aoData.push( { "name": "more_data", "value": "my_value" } );  
 1408         }  
 1409     } );  
 1410 } );  
 1411 /* 
 1412  * sAjaxDataProp 
 1413  * 默认为aaData 
 1414  * 当使用Ajax数据源或者服务器端处理的时候，DataTable会默认搜索aaData属性作为数据源 
 1415  * 该选项允许变更数据源的名称，你可以使用JavaScript的点号对象表示法去访问多级网状数据源 
 1416  */  
 1417 // Get data from { "data": [...] }  
 1418 $(document).ready(function() {  
 1419     var oTable = $('#example').dataTable( {  
 1420         "sAjaxSource": "sources/data.txt",  
 1421         "sAjaxDataProp": "data"  
 1422     } );  
 1423 } );  
 1424   
 1425   
 1426 // Get data from { "data": { "inner": [...] } }  
 1427 $(document).ready(function() {  
 1428     var oTable = $('#example').dataTable( {  
 1429         "sAjaxSource": "sources/data.txt",  
 1430         "sAjaxDataProp": "data.inner"  
 1431     } );  
 1432 } );  
 1433 /* 
 1434  * sAjaxSource 
 1435  * 默认为null 
 1436  * 该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData） 
 1437  * 可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源 
 1438  */  
 1439 $(document).ready(function(){  
 1440   $('#example').dataTable( {  
 1441     "sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"  
 1442   });  
 1443 })  
 1444 /* 
 1445  * sServerMethod 
 1446  * 默认值为GET 
 1447  * 设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式 
 1448  */  
 1449 $(document).ready(function(){  
 1450     $('#example').dataTable({  
 1451         "bServerSide": true,  
 1452         "sAjaxSource": "scripts/post.php",  
 1453         "sServerMethod": "POST"  
 1454     });  
 1455 }); 
mj_小军
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery dataTable 参数详解

http://www.360doc.com/content/15/0108/14/8790037_439143305.shtml Js代码 1 //@translator codepiano 2 //@blog codepiano 3 //@email [email protected] 4 //
复制链接

扫一扫