DataTable 参数详解

缺乏、安全感 2022-05-27 03:12 289阅读 0赞

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 });

转自：http://www.360doc.com/content/15/0108/14/8790037\_439143305.shtml