jquery dataTables.min.js API

今天药忘吃喽~ 2022-06-16 13:47 216阅读 0赞

demo:

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px"><a href="http://datatables.net/release-datatables/examples/api/select_single_row.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/select_single_row.html</a>&nbsp;选择一行<br> <a href="http://datatables.net/release-datatables/examples/api/select_row.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/select_row.html</a>选择多行<br> <a href="http://datatables.net/release-datatables/examples/api/editable.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/editable.html</a>&nbsp;即时编辑行<br> <a href="http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html</a>&nbsp;多个tab<br> <a href="http://datatables.net/release-datatables/examples/api/add_row.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/add_row.html</a>添加一行（静态）<br> <a href="http://datatables.net/release-datatables/examples/api/multi_filter.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/multi_filter.html</a>多列搜索<br> <a href="http://datatables.net/release-datatables/examples/api/multi_filter_select.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/multi_filter_select.html</a>多列搜索（扩展）<br> <a href="http://datatables.net/release-datatables/examples/api/highlight.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/highlight.html</a>行列 高亮<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/highlight.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/highlight.html</a>&nbsp;鼠标移上去亮<br> <a href="http://datatables.net/release-datatables/examples/api/row_details.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/row_details.html</a>行详细信息<br> <a href="http://datatables.net/release-datatables/examples/api/counter_column.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/counter_column.html</a>添加行数<br> <a href="http://datatables.net/release-datatables/examples/api/show_hide.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/show_hide.html</a>隐藏列<br> <a href="http://datatables.net/release-datatables/examples/api/api_in_init.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/api/api_in_init.html</a>点中即为搜索条件<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/events_live.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/events_live.html</a>&nbsp;给每一个行添加事件显示行的信息<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/events_pre_init.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/events_pre_init.html</a>鼠标事件 移到某一行显示信息<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html</a>&nbsp;同上<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/dom_multiple_elements.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/dom_multiple_elements.html</a>&nbsp;用sdom属性控制插件位置<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/dom_toolbar.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/dom_toolbar.html</a>sdom应用<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/length_menu.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/length_menu.html</a>更改按多少数据显示<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/complex_header.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/complex_header.html</a>表头组<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html</a>按组显示行<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/row_callback.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/row_callback.html</a>列回调函数<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html</a>总计（footer回调）<br> <a href="http://datatables.net/release-datatables/examples/advanced_init/sorting_control.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/sorting_control.html</a>自定义排序<br> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <a href="http://datatables.net/release-datatables/examples/advanced_init/language_file.html" style="text-decoration:none; color:rgb(51,102,153)" rel="nofollow">http://datatables.net/release-datatables/examples/advanced_init/language_file.html</a>国际化</p> </td> 
  </tr> 
 </tbody> 
</table>

**一：api**

**bAutoWidth** ：启用或禁用自动列宽度的计算。

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function () \{
2.      $('\#example').dataTable( \{
3.          "bAutoWidth": false  //关闭后，表格将不会自动计算表格大小，在浏览器大化小化的时候会挤在一坨
4.      \} );
5.  \} );

复制代码

**bDeferRender** ：根据官网的介绍翻译过来就是，延期渲染，可以有个速度的提升，当datatable 使用Ajax或者JS源表的数据。这个选项设置为true,将导致datatable推迟创建表元素每个元素,直到他们都创建完成——本参数的目的是节省大量的时间。

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> false</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      var oTable = $('\#example').dataTable( \{
3.          "sAjaxSource": "sources/arrays.txt",
4.          "bDeferRender": true   //这个参数我个人没有使用过，到底是不是这个效果，大家自己去尝试一下
5.      \} );
6.  \} );

复制代码

**bFilter** ：这个很容易明白，启用或禁用过滤数据。在datatable过滤是“智能”,它允许用户 最终输入多个关键字(空格分隔)，和每一行数据匹配,即使不是在被指定的顺序(这允许匹配多个列)。注意,如果您希望使用过滤，在datatable中必 须设置为true，如果要删除默认过滤输入框和留住过滤功能,请使用\{ @link DataTable.defaults.sDom \}。这个最后一句不明白，不知道大家怎么理解。

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function () \{
2.      $('\#example').dataTable( \{
3.          "bFilter": false
4.      \} );
5.  \} );

复制代码

**bJQueryUI** ：这个不用多说了，一看就懂，启用jQuery UI样式，(需要在页面添加jQuery的样式文件)。

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> false</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.         "bJQueryUI": true
4.      \} );
5.  \} );

复制代码

**bLengthChange** ：开启一页显示多少条数据的下拉菜单，允许用户从下拉框(10、25、50和100)，注意需要分页(bPaginate：true)。

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function () \{
2.      $('\#example').dataTable( \{
3.          "bLengthChange": false,

复制代码

**bPaginate** ：开启分页功能，如果不开启，将会全部显示

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function () \{
2.      $('\#example').dataTable( \{
3.          "bPaginate": false   
4.      \} );
5.  \} );

复制代码

**bProcessing** ：开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> false</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function () \{
2.      $('\#example').dataTable( \{
3.          "bProcessing": true
4.      \} );
5.  \} );

复制代码

**bScrollInfinite** ：是否开启不限制长度的滚动条（和sScrollY属性结合使用），不限制长度的滚动条意味着当用户拖动滚动条的时候DataTable会不断加载数据当数据集十分大的时候会有些用处，该选项无法和分页选项同时使用，分页选项会被自动禁止，注意，额外推荐的滚动条会优先与该选项

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> false</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "bScrollInfinite": true,
4.          "bScrollCollapse": true,
5.          "sScrollY": "200px"//长200像素
6.      \} );
7.  \} );

复制代码

**bServerSide** ：开启服务器模式，使用服务器端处理配置datatable。注意：sAjaxSource 参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> false</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function () \{
2.        $('\#example').dataTable( \{
3.            "bServerSide": true,
4.            "sAjaxSource": "xhr.php"
5.         \} );
6.  \} );

复制代码

**bInfo** ：启用或禁用表信息显示。这显示了关于数据的信息,目前在网页上,包括信息过滤数据,如果行为被执行。这个参数在bServerSide配置后需要用到。

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function () \{
2.      $('\#example').dataTable( \{
3.         "bInfo": false//如果这个参数不穿到后台去，服务器分页会报错，据说这个参数包含了表的所有信息
4.      \} );
5.  \} );

复制代码

**bSort** ：开启排序功能，每一列都有排序功能，如果关闭了，排序功能将失效，也可以自定义排序功能。单个列的排序可以禁用“bSortable”选项。

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function () \{
2.      $('\#example').dataTable( \{
3.          "bSort": false
4.      \} );
5.  \} );

复制代码

**bSortClasses** ：是否在当前被排序的列上额外添加sorting\_1,sorting\_2,sorting\_3三个class，当该列被排序的时候，可以切换其背景颜色，该选项作为一个来回切换的属性会增加执行时间（当class被移除和添加的时候），当对大数据集进行排序的时候你或许希望关闭该选项

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function () \{
2.      $('\#example').dataTable( \{
3.          "bSortClasses": false
4.       \} );
5.  \} );

复制代码

**bStateSave** ：是否开启状态保存，当选项开启的时候会使用一个cookie保存表格展示的信息的状态，例如分页信息，展示长度，过滤和排序等。这样当终端用户重新加载这个页面的时候可以使用以前的设置

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> false</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function () \{
2.      $('\#example').dataTable( \{
3.          "bStateSave": true
4.      \} );
5.  \} );

复制代码

**sScrollX** ：是否开启水平滚动，当一个表格过于宽以至于无法放入一个布局的时候，或者表格有太多列的时候，你可以开启该选项从而在一个可横向滚动的视图里面展示表格，该属性可以是css设置，或者一个数字（作为像素量度来使用）

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> <em>blank string - i.e. disabled</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "sScrollX": "100%",
4.          "bScrollCollapse": true
5.       \} );
6.  \} );

复制代码

**sScrollY：**是否开启垂直滚动，垂直滚动会驱使DataTable设置为给定的长度，任何溢出到当前视图之外的数据可以通过垂直滚动进行察看当在小范围区域中显示大量数据的时候，可以在分页和垂直滚动中选择一种方式，该属性可以是css设置，或者一个数字（作为像素量度来使用）

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> <em>blank string - i.e. disabled</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "sScrollY": "200px",
4.          "bPaginate": false
5.       \} );
6.  \} );

复制代码

**bDestroy** ：使用传递的新的初始化对象中的属性构造一个新的表格，并替换一个匹配指定的选择器的表格，如果没有匹配到表格，新的表格会被作为一个普通表格被构建

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> false</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "sScrollY": "200px",
4.          "bPaginate": false
5.      \} );
6.     
7.    // Some time later....
8.      $('\#example').dataTable( \{
9.          "bFilter": false,
10.         "bDestroy": true
11.     \} );
12. \} );

复制代码

**bRetrieve** ：使用指定的选择器检索表格，注意，如果表格已经被初始化，该参数会直接返回已经被创建的对象，并不会顾及你传递进来的初始化参数对象的变化，将该参数设置为true说明你确认已经明白这一点，如果你需要的话，bDestroy可以用来重新初始化表格

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> false</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      initTable();
3.      tableActions();
4.  \} );
5.  function initTable ()
6.  \{
7.      return $('\#example').dataTable( \{
8.      "sScrollY": "200px",
9.      "bPaginate": false,
10.     "bRetrieve": true
11.     \} );
12. \}
13. function tableActions ()
14. \{
15.     var oTable = initTable();
16.     // perform API operations with oTable
17. \}

复制代码

**bScrollAutoCss** ：指明DataTable中滚动的标题元素是否被允许设置内边距和外边距等

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "bScrollAutoCss": false,
4.          "sScrollY": "200px"
5.      \} );
6.  \} );

复制代码

**bScrollCollapse** ：当垂直滚动被允许的时候，DataTable会强制表格视图在任何时候都是给定的高度（对布局有利）不过，当把数据集过滤到十分小的时候看起来会很古怪，而且页脚会留在最下面当结果集的高度比给定的高度小时该参数会使表格高度自适应

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> false</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "sScrollY": "200",
4.          "bScrollCollapse": true
5.      \} );
6.  \} );

复制代码

**bSortCellsTop** ：是否允许DataTable使用顶部（默认为true）的单元格，或者底部（默认为false）的单元格，当使用复合表头的时候会有些用处

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> false</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "bSortCellsTop": true
4.      \} );
5.  \} );

复制代码

**iCookieDuration** ：指定用于存储客户端信息到cookie中的时间长度，超过这个时间后，自动过期

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 7200&nbsp;<em>(2 hours)</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> int</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.         "iCookieDuration": 60\*60\*24; // 一天
4.      \} );
5.  \} )

复制代码

**iDeferLoading** ：当选项被开启的时候，DataTable在非加载第一次的时候不会向服务器请求数据，而是会使用页面上的已有数据（不会应用排序等），因此在加载的时候保留一个XmlHttpRequest，iDeferLoading被用来指明需要延迟加载，而且也用来通知DataTable一个满的表格有多少条数据，信息元素和分页会被正确保留

1.  // 57 records available in the table, no filtering applied
2.  $(document).ready( function() \{
3.      $('\#example').dataTable( \{
4.          "bServerSide": true,
5.          "sAjaxSource": "scripts/server\_processing.php",
6.          "iDeferLoading": 57
7.      \} );
8.  \} );
9.  // 57 records after filtering, 100 without filtering (an initial filter applied)
10. $(document).ready( function() \{
11.      $('\#example').dataTable( \{
12.         "bServerSide": true,
13.         "sAjaxSource": "scripts/server\_processing.php",
14.         "iDeferLoading": \[ 57, 100 \],
15.             "oSearch": \{
16.             "sSearch": "my\_filter"
17.           \}
18.       \} );
19. \} );

复制代码

**iDisplayLength** ：单页显示的数据的条数，如果bLengthChange属性被开启，终端用户可以通过一个弹出菜单重写该数值

1.  $(document).ready( function() \{
2.         $('\#example').dataTable( \{
3.              "iDisplayLength": 50
4.          \} );
5.  \} )

复制代码

**iDisplayStart** ：当开启分页的时候，定义展示的记录的起始序号，不是页数，因此如果你每个分页有10条记录而且想从第三页开始，需要把该参数指定为20

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "iDisplayStart": 20
4.      \} );
5.  \} )

复制代码

**iScrollLoadGap** ：滚动余界是指DataTable在当前页面还有多少条数据可供滚动时自动加载新的数据，你可能希望指定一个足够大的余界，以便滚动加载数据的操作对用户来说是平滑的，同时也不会大到加载比需要的多的多的数据

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "bScrollInfinite": true,
4.          "bScrollCollapse": true,
5.          "sScrollY": "200px",
6.          "iScrollLoadGap": 50
7.      \} );
8.  \} );

复制代码

**iTabIndex** :默认情况下DataTable允许通过为需要键盘导航的元素添加tabindex属性来进行导航（排序、分页、过滤），允许你通过tab键切换控制组件，使用回车键去激活他们，默认为0表示按照文档流来切换，如果需要的话，你可以使用该参数重写切换顺序，使用-1来禁止内建的键盘导航

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "iTabIndex": 1
4.      \} );
5.  \} );

复制代码

**oSearch** ：该参数允许你在初始化的时候使用已经定义的全局过滤状态，sSearch对象必须被定义，但是所有的其它选项都是可选的，当bRegex为true的时候，搜索字符串会被当作正则表达式，当为false（默认）的时候，会被直接当作一个字符串，当bSmart为true的时候，DataTable会使用使用灵活过滤策略（匹配任何可能的数据），为false的时候不会这样做

1.  $(document).ready( function() \{
2.        $('\#example').dataTable( \{
3.            "oSearch": \{"sSearch": "Initial search"\}
4.         \} );
5.  \} )

复制代码

**sAjaxDataProp** ：当使用Ajax数据源或者服务器端处理的时候，DataTable会默认搜索aaData属性作为数据源，该选项允许变更数据源的名称，你可以使用JavaScript的点号对象表示法去访问多级网状数据源

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> aaData</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Get data from \{ "data": \[...\] \}
2.  $(document).ready( function() \{
3.      var oTable = $('\#example').dataTable( \{
4.          "sAjaxSource": "sources/data.txt",
5.         "sAjaxDataProp": "data"
6.      \} );
7.  \} );
8.  // Get data from \{ "data": \{ "inner": \[...\] \} \}
9.  $(document).ready( function() \{
10.     var oTable = $('\#example').dataTable( \{
11.        "sAjaxSource": "sources/data.txt",
12.       "sAjaxDataProp": "data.inner"
13.    \} );
14. \} );

复制代码

**sAjaxSource** ：该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData），可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> null</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.          "sAjaxSource": "list.action"
4.       \} );
5.  \} )

复制代码

**sCookiePrefix** :该参数可以用来重写DataTable默认指定的用来存储状态信息的cookie的前缀

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> SpryMedia_DataTables_</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.        "sCookiePrefix": "my\_datatable\_"
4.      \} );
5.  \} );

复制代码

**sDom** ：这是用于定义DataTable布局的一个强大的属性，包括分页，显示多少条数据和搜索，格式如下：

1.  The following options are allowed:
2.      'l' - 左上角按个下拉框，10个，20个，50个，所有的哪个
3.      'f' - 快速过滤框
4.      't' - 表格本身
5.      'i' - 分页信息
6.      'p' -分页按钮
7.      'r' - 现在正在加载中……
8.  The following constants are allowed:
9.      'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
10.     'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
11. The following syntax is expected:
12.     '<' and '>' - div 元素
13.     '<"class" and '>' - 给div加clasa
14.     '<"\#id" and '>' - 给div加上id
15. Examples:
16.     '<"wrapper"flipt>'
17.     '<lf<t>ip>'

复制代码

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> lfrtip&nbsp;<em>(when bJQueryUI is false)</em>&nbsp;<strong>or</strong>&nbsp;&lt;"H"lfr&gt;t&lt;"F"ip&gt;&nbsp;<em>(when bJQueryUI is true)</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.         "sDom": '<"top"i>rt<"bottom"flp><"clear">'
4.      \} );
5.  \} );

复制代码

> '<"top"i>rt<"bottom"flp><"clear">'

**这段代码翻译为html就是这样子的：**

1.  <div class="top">
2.      i
3.  </div>
4.  rt
5.  <div class="bottom">
6.      flp
7.  </div>
8.  <div class="clear"></div>

复制代码

这样一对比起来，就容易理解多了.[Datatables之强大的sDom属性的应用][Datatables_sDom]  
**sPaginationType** ：DataTable内建了两种交互式分页策略，两个按钮和全页数，展现给终端用户不同的控制方式，可以通过API增加策略

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> two_button</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.         "sPaginationType": "full\_numbers"
4.      \} );
5.  \} )

复制代码

**sScrollXInner** ：当横向滚动可用的时候，该属性可以用来强制DataTable的宽度比需要的更长，比如你需要表格彼此相隔适宜，该变量可以用来使表格变大，而且强制滚动，该该属性可以是css设置，或者一个数字（作为像素量度来使用）

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> <em>blank string - i.e. disabled</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.         "sScrollX": "100%",
4.         "sScrollXInner": "110%"
5.     \} );
6.  \} );

复制代码

**sServerMethod** ：设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式

<table style="line-height:28px; color:rgb(0,0,0); font-family:'Hiragino Sans GB W3','Hiragino Sans GB',Arial,Helvetica,simsun,u5b8bu4f53; font-size:16px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 默认值：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> GET</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> 类型：</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.      $('\#example').dataTable( \{
3.         "bServerSide": true,
4.         "sAjaxSource": "list.action",
5.         "sServerMethod": "POST"   //以post的方式提交数据
6.      \} );
7.  \} )
8.

复制代码

二： 列属性

**aoColumnDefs**: This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in the array (please note that aoColumnDefs was introduced in DataTables 1.7). This allows great flexibility when creating tables, as the aoColumnDefs arrays can be of any length, targeting the columns you specifically want. The aTargets property is an array to target one of many columns and each element in it can be:  
  
aoColumnDefs:这个数组允许您针对一个特定列,多个列,或者所有列,使用aTargets属性的数组中的每个对象(请注意,介绍了 aoColumnDefs datatable 1.7)。这提供了很大的灵活性在创建表,因为aoColumnDefs数组可以是任意长度,目标是你特别想要的列。aTargets的属性是一个数组来 目标众多列和每个元素在它可以:

*  a string - class name will be matched on the TH for the column
 *  0 or a positive integer - column index counting from the left
 *  a negative integer - column index counting from the right
 *  the string "\_all" - all columns (i.e. assign a default)

**aoColumns**: If specified, then the length of this array  **must** be equal to the number of columns in the original HTML table. Use 'null' where you wish to use only the default values and automatically detected options.  
  
aoColumnDefs参数和aoColumns可以一起使用,尽管aoColumnDefs优先aoColumns的灵活性。 如果两者都使用,aoColumns定义将最高优先级。同样,如果相同的列的目标是在aoColumnDefs多次,第一个元素的数组将最高优先级,最后 一个最低的。  
  
  
**aDataSort：定义一个列或多个列自定义排序**

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> null&nbsp;<em>Takes the value of the column index automatically</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> array</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "aDataSort": \[ 0, 1 \], "aTargets": \[ 0 \] \},
6.        \{ "aDataSort": \[ 1, 0 \], "aTargets": \[ 1 \] \},
7.        \{ "aDataSort": \[ 2, 3, 4 \], "aTargets": \[ 2 \] \}
8.      \]
9.    \} );
10. \} );
11. // Using aoColumns
12. $(document).ready( function() \{
13.   $('\#example').dataTable( \{
14.     "aoColumns": \[
15.       \{ "aDataSort": \[ 0, 1 \] \},
16.       \{ "aDataSort": \[ 1, 0 \] \},
17.       \{ "aDataSort": \[ 2, 3, 4 \] \},
18.       null,
19.       null
20.     \]
21.   \} );
22. \} );

复制代码

**asSorting：控制列的升序或降序到自定义列**

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> [ 'asc', 'desc' ]</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> array</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "asSorting": \[ "asc" \], "aTargets": \[ 1 \] \},
6.        \{ "asSorting": \[ "desc", "asc", "asc" \], "aTargets": \[ 2 \] \},
7.        \{ "asSorting": \[ "desc" \], "aTargets": \[ 3 \] \}
8.      \]
9.    \} );
10. \} );
11. // Using aoColumns
12. $(document).ready( function() \{
13.   $('\#example').dataTable( \{
14.     "aoColumns": \[
15.       null,
16.       \{ "asSorting": \[ "asc" \] \},
17.       \{ "asSorting": \[ "desc", "asc", "asc" \] \},
18.       \{ "asSorting": \[ "desc" \] \},
19.       null
20.     \]
21.   \} );
22. \} );

复制代码

**bSearchable：设置列是否能被快速检索框搜索到**

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "bSearchable": false, "aTargets": \[ 0 \] \}
6.      \] \} );
7.  \} );
8.  // Using aoColumns
9.  $(document).ready( function() \{
10.   $('\#example').dataTable( \{
11.     "aoColumns": \[
12.       \{ "bSearchable": false \},
13.       null,
14.       null,
15.       null,
16.       null
17.     \] \} );
18. \} );

复制代码

**bSortable：** **启用或禁用列排序。**

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "bSortable": false, "aTargets": \[ 0 \] \}
6.      \] \} );
7.  \} );
8.  // Using aoColumns
9.  $(document).ready( function() \{
10.   $('\#example').dataTable( \{
11.     "aoColumns": \[
12.       \{ "bSortable": false \},
13.       null,
14.       null,
15.       null,
16.       null
17.     \] \} );
18. \} );

复制代码

**bUseRendered** ：高版本已经废弃这个属性，没有使用过，直接翻译吧！当使用fnRender()为一个 列,您可能希望使用原始的数据(在呈现之前)进行排序和过滤(默认是用于呈现的数据,用户可以看到)。这可能是有用的日期等。请注意,该选项已被弃用,将 被删除的下一个版本的datatable。请用mRender / mData而不是fnRender。

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

无例子代码；  
**bVisible：** **启用或禁用本列显示。**

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> true</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> boolean</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "bVisible": false, "aTargets": \[ 0 \] \}
6.      \] \} );
7.  \} );
8.  // Using aoColumns
9.  $(document).ready( function() \{
10.   $('\#example').dataTable( \{
11.     "aoColumns": \[
12.       \{ "bVisible": false \},
13.       null,
14.       null,
15.       null,
16.       null
17.     \] \} );
18. \} );

复制代码

**fnCreatedCell：**开发人员可定义的函数,就会调用一个细胞被创建(Ajax源等)或处理输入(DOM源)。这可以作为一种恭维,mRender允许您修改DOM元素(例如添加背景颜色)当元素是可用的。

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> &nbsp;</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> function</td> 
  </tr> 
 </tbody> 
</table>

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "aoColumnDefs": \[ \{
4.        "aTargets": \[3\],
5.        "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) \{
6.          if ( sData == "1.7" ) \{
7.            $(nTd).css('color', 'blue')
8.          \}
9.        \}
10.     \} \]
11.   \});
12. \} );

复制代码

**fnRender：**高版本已经废弃这个属性。mRender这个代替  
  
**iDataSort：**列索引(从0开始!),你想要执行一个在本专栏时被选中进行排序。这可以用于排序在隐藏列例如。这个也没使用过

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> -1&nbsp;<em>Use automatically calculated column index</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> int</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "iDataSort": 1, "aTargets": \[ 0 \] \}
6.      \]
7.    \} );
8.  \} );
9.  // Using aoColumns
10. $(document).ready( function() \{
11.   $('\#example').dataTable( \{
12.     "aoColumns": \[
13.       \{ "iDataSort": 1 \},
14.       null,
15.       null,
16.       null,
17.       null
18.     \]
19.   \} );
20. \} );

复制代码

**mData：**这个属性可以用来读取JSON数据从任何数据源属性,包括深层嵌套对象/属性。可以给mData在许多不同的方面影响其行为:

*  integer - treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column).
 *  string - read an object property from the data source. Note that you can use Javascript dotted notation to read deep properties / arrays from the data source.
 *  null - the sDefaultContent option will be used for the cell (null by default, so you will need to specify the default content you want - typically an empty string). This can be useful on generated columns such as edit / delete action columns.
 *  function - the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. The function takes three parameters:  
    
    
     *  \{array|object\} The data source for the row
     *  \{string\} The type call data requested - this will be 'set' when setting data or 'filter', 'display', 'type', 'sort' or undefined when gathering data. Note that when *undefined* is given for the type DataTables expects to get the raw data for the object back
     *  \{\*\} Data to set when the second parameter is 'set'.
    
    The return value from the function is not required when 'set' is the type of call, but otherwise the return is what will be used for the data requested.

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> null&nbsp;<em>Use automatically calculated column index</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Read table data from objects
2.  $(document).ready( function() \{
3.    var oTable = $('\#example').dataTable( \{
4.      "sAjaxSource": "sources/deep.txt",
5.      "aoColumns": \[
6.        \{ "mData": "engine" \},
7.        \{ "mData": "browser" \},
8.        \{ "mData": "platform.inner" \},
9.        \{ "mData": "platform.details.0" \},
10.       \{ "mData": "platform.details.1" \}
11.     \]
12.   \} );
13. \} );
14. // Using mData as a function to provide different information for
15. // sorting, filtering and display. In this case, currency (price)
16. $(document).ready( function() \{
17.   var oTable = $('\#example').dataTable( \{
18.     "aoColumnDefs": \[ \{
19.       "aTargets": \[ 0 \],
20.       "mData": function ( source, type, val ) \{
21.         if (type === 'set') \{
22.           source.price = val;
23.           // Store the computed dislay and filter values for efficiency
24.           source.price\_display = val=="" ? "" : "\[        DISCUZ\_CODE\_7        \]quot;+numberFormat(val);
25.           source.price\_filter  = val=="" ? "" : "\[        DISCUZ\_CODE\_7        \]quot;+numberFormat(val)+" "+val;
26.           return;
27.         \}
28.         else if (type === 'display') \{
29.           return source.price\_display;
30.         \}
31.         else if (type === 'filter') \{
32.           return source.price\_filter;
33.         \}
34.         // 'sort', 'type' and undefined all just use the integer
35.         return source.price;
36.       \}
37.     \} \]
38.   \} );
39. \} );

复制代码

**mRender** ：This property is the rendering partner to mData and it is suggested that when you want to manipulate data for display (including filtering, sorting etc) but not altering the underlying data for the table, use this property. mData can actually do everything this property can and more, but this parameter is easier to use since there is no 'set' option. Like mData is can be given in a number of different ways to effect its behaviour, with the addition of supporting array syntax for easy outputting of arrays (including arrays of objects):

*  integer - treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column).
 *  string - read an object property from the data source. Note that you can use Javascript dotted notation to read deep properties / arrays from the data source and also array brackets to indicate that the data reader should loop over the data source array. When characters are given between the array brackets, these characters are used to join the data source array together. For example: "accounts\[, \].name" would result in a comma separated list with the 'name' value from the 'accounts' array of objects.
 *  function - the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. The function takes three parameters:  
    
    
     *  \{array|object\} The data source for the row (based on mData)
     *  \{string\} The type call data requested - this will be 'filter', 'display', 'type' or 'sort'.
     *  \{array|object\} The full data source for the row (not based on mData)
    
    The return value from the function is what will be used for the data requested.

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> null&nbsp;<em>Use mData</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Create a comma separated list from an array of objects
2.  $(document).ready( function() \{
3.    var oTable = $('\#example').dataTable( \{
4.      "sAjaxSource": "sources/deep.txt",
5.      "aoColumns": \[
6.        \{ "mData": "engine" \},
7.        \{ "mData": "browser" \},
8.        \{
9.          "mData": "platform",
10.         "mRender": "\[, \].name"
11.       \}
12.     \]
13.   \} );
14. \} );
15. // Use as a function to create a link from the data source
16. $(document).ready( function() \{
17.   var oTable = $('\#example').dataTable( \{
18.     "aoColumnDefs": \[ \{
19.       "aTargets": \[ 0 \],
20.       "mData": "download\_link",
21.       "mRender": function ( data, type, full ) \{
22.         return '<a href="http://blog.163.com/gxd\_dnjlw/blog/'+data+'">Download</a>';
23.       \}
24.     \} \]
25.   \} );
26. \} );

复制代码

**sCellType：**Change the cell type created for the column - either TD cells or TH cells. This can be useful as TH cells have semantic meaning in the table body, allowing them to act as a header for a row (you may wish to add scope='row' to the TH elements).

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> td</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Make the first column use TH cells
2.  $(document).ready( function() \{
3.    var oTable = $('\#example').dataTable( \{
4.      "aoColumnDefs": \[ \{
5.        "aTargets": \[ 0 \],
6.        "sCellType": "th"
7.      \} \]
8.    \} );
9.  \} );

复制代码

**sClass：给列加上自己定义的属性**

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> <em>Empty string</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "sClass": "my\_class", "aTargets": \[ 0 \] \}
6.      \]
7.    \} );
8.  \} );
9.  // Using aoColumns
10. $(document).ready( function() \{
11.   $('\#example').dataTable( \{
12.     "aoColumns": \[
13.       \{ "sClass": "my\_class" \},
14.       null,
15.       null,
16.       null,
17.       null
18.     \]
19.   \} );
20. \} );

复制代码

**sContentPadding** ：When DataTables calculates the column widths to assign to each column, it finds the longest string in each column and then constructs a temporary table and reads the widths from that. The problem with this is that "mmm" is much wider then "iiii", but the latter is a longer string - thus the calculation can go wrong (doing it properly and putting it into an DOM object and measuring that is horribly(!) slow). Thus as a "work around" we provide this option. It will append its value to the text that is found to be the longest string for the column - i.e. padding. Generally you shouldn't need this, and it is not documented on the general DataTables.net documentation

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> <em>Empty string</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumns
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumns": \[
5.        null,
6.        null,
7.        null,
8.        \{
9.          "sContentPadding": "mmm"
10.       \}
11.     \]
12.   \} );
13. \} );

复制代码

**sDefaultContent** ：Allows a default value to be given for a column's data, and will be used whenever a null data source is encountered (this can be because mData is set to null, or because the data source itself is null).

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> null</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{
6.          "mData": null,
7.          "sDefaultContent": "Edit",
8.          "aTargets": \[ -1 \]
9.        \}
10.     \]
11.   \} );
12. \} );
13. // Using aoColumns
14. $(document).ready( function() \{
15.   $('\#example').dataTable( \{
16.     "aoColumns": \[
17.       null,
18.       null,
19.       null,
20.       \{
21.         "mData": null,
22.         "sDefaultContent": "Edit"
23.       \}
24.     \]
25.   \} );
26. \} );

复制代码

**sName：**This parameter is only used in DataTables' server-side processing. It can be exceptionally useful to know what columns are being displayed on the client side, and to map these to database fields. When defined, the names also allow DataTables to reorder information from the server if it comes back in an unexpected order (i.e. if you switch your columns around on the client-side, your server-side code does not also need updating).

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> <em>Empty string</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "sName": "engine", "aTargets": \[ 0 \] \},
6.        \{ "sName": "browser", "aTargets": \[ 1 \] \},
7.        \{ "sName": "platform", "aTargets": \[ 2 \] \},
8.        \{ "sName": "version", "aTargets": \[ 3 \] \},
9.        \{ "sName": "grade", "aTargets": \[ 4 \] \}
10.     \]
11.   \} );
12. \} );
13. // Using aoColumns
14. $(document).ready( function() \{
15.   $('\#example').dataTable( \{
16.     "aoColumns": \[
17.       \{ "sName": "engine" \},
18.       \{ "sName": "browser" \},
19.       \{ "sName": "platform" \},
20.       \{ "sName": "version" \},
21.       \{ "sName": "grade" \}
22.     \]
23.   \} );
24. \} );

复制代码

**sSortDataType** ：Defines a data source type for the sorting which can be used to read real-time information from the table (updating the internally cached version) prior to sorting. This allows sorting to occur on user editable elements such as form inputs.

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> std</td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "sSortDataType": "dom-text", "aTargets": \[ 2, 3 \] \},
6.        \{ "sType": "numeric", "aTargets": \[ 3 \] \},
7.        \{ "sSortDataType": "dom-select", "aTargets": \[ 4 \] \},
8.        \{ "sSortDataType": "dom-checkbox", "aTargets": \[ 5 \] \}
9.      \]
10.   \} );
11. \} );
12. // Using aoColumns
13. $(document).ready( function() \{
14.   $('\#example').dataTable( \{
15.     "aoColumns": \[
16.       null,
17.       null,
18.       \{ "sSortDataType": "dom-text" \},
19.       \{ "sSortDataType": "dom-text", "sType": "numeric" \},
20.       \{ "sSortDataType": "dom-select" \},
21.       \{ "sSortDataType": "dom-checkbox" \}
22.     \]
23.   \} );
24. \} );

复制代码

**sTitle** ：The title of this column.

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> null&nbsp;<em>Derived from the 'TH' value for this column in the original HTML table.</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "sTitle": "My column title", "aTargets": \[ 0 \] \}
6.      \]
7.    \} );
8.  \} );
9.  // Using aoColumns
10. $(document).ready( function() \{
11.   $('\#example').dataTable( \{
12.     "aoColumns": \[
13.       \{ "sTitle": "My column title" \},
14.       null,
15.       null,
16.       null,
17.       null
18.     \]
19.   \} );
20. \} );

复制代码

**sType：**The type allows you to specify how the data for this column will be sorted. Four types (string, numeric, date and html (which will strip HTML tags before sorting)) are currently available. Note that only date formats understood by Javascript's Date() object will be accepted as type date. For example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric', 'date' or 'html' (by default). Further types can be adding through plug-ins.

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> null&nbsp;<em>Auto-detected from raw data</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "sType": "html", "aTargets": \[ 0 \] \}
6.      \]
7.    \} );
8.  \} );
9.  // Using aoColumns
10. $(document).ready( function() \{
11.   $('\#example').dataTable( \{
12.     "aoColumns": \[
13.       \{ "sType": "html" \},
14.       null,
15.       null,
16.       null,
17.       null
18.     \]
19.   \} );
20. \} );

复制代码

**sWidth：**Defining the width of the column, this parameter may take any CSS value (3em, 20px etc). DataTables applies 'smart' widths to columns which have not been given a specific width through this interface ensuring that the table remains readable.

<table style="line-height:28px"> 
 <tbody> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Default:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> null&nbsp;<em>Automatic</em></td> 
  </tr> 
  <tr> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> Type:</td> 
   <td style="line-height:24.5px; font-size:14px; overflow:hidden; border:1px solid rgb(227,237,245); padding:4px"> string</td> 
  </tr> 
 </tbody> 
</table>

1.  // Using aoColumnDefs
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "aoColumnDefs": \[
5.        \{ "sWidth": "20%", "aTargets": \[ 0 \] \}
6.      \]
7.    \} );
8.  \} );
9.  // Using aoColumns
10. $(document).ready( function() \{
11.   $('\#example').dataTable( \{
12.     "aoColumns": \[
13.       \{ "sWidth": "20%" \},
14.       null,
15.       null,
16.       null,
17.       null
18.     \]
19.   \} );
20. \} );

复制代码

三：回调

fnCookieCallback：还没有使用过

1.  $(document).ready( function () \{
2.    $('\#example').dataTable( \{
3.      "fnCookieCallback": function (sName, oData, sExpires, sPath) \{
4.        // Customise oData or sName or whatever else here
5.        return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
6.      \}
7.    \} );
8.  \} );

复制代码

fnCreatedRow：顾名思义，创建行得时候的回调函数

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "fnCreatedRow": function( nRow, aData, iDataIndex ) \{
4.        // 为a的话字体加粗
5.        if ( aData\[4\] == "A" )
6.        \{
7.          $('td:eq(4)', nRow).html( '<b>A</b>' );
8.        \}
9.      \}
10.   \} );
11. \} );

复制代码

fnDrawCallback：draw画 ，这个应该是重绘的回调函数

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "fnDrawCallback": function( oSettings ) \{
4.        alert( 'DataTables 重绘了' );
5.      \}
6.    \} );
7.  \} );

复制代码

fnFooterCallback：底部的回调函数，这个可以用来做总计之类的功能

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "fnFooterCallback": function( nFoot, aData, iStart, iEnd, aiDisplay ) \{
4.        nFoot.getElementsByTagName('th')\[0\].innerHTML = "Starting index is "+iStart;
5.      \}
6.    \} );
7.  \} )

复制代码

fnFormatNumber：顾名思义，格式化数字的显示方式

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "fnFormatNumber": function ( iIn ) \{
4.        if ( iIn < 1000 ) \{
5.          return iIn;
6.        \} else \{
7.          var
8.            s=(iIn+""),
9.            a=s.split(""), out="",
10.           iLen=s.length;
11.          
12.         for ( var i=0 ; i<iLen ; i++ ) \{
13.           if ( i%3 === 0 && i !== 0 ) \{
14.             out = "'"+out;
15.           \}
16.           out = a\[iLen-i-1\]+out;
17.         \}
18.       \}
19.       return out;
20.     \};
21.   \} );
22. \} );

复制代码

fnHeaderCallback：表头的回调函数

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) \{
4.        nHead.getElementsByTagName('th')\[0\].innerHTML = "Displaying "+(iEnd-iStart)+" records";
5.      \}
6.    \} );
7.  \} )

复制代码

fnInfoCallback：datatables信息的回调函数

1.  $('\#example').dataTable( \{
2.    "fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) \{
3.      return iStart +" to "+ iEnd;
4.    \}
5.  \} );

复制代码

fnInitComplete：datatables初始化完毕后会调用这个方法

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "fnInitComplete": function(oSettings, json) \{
4.        alert( 'DataTables has finished its initialisation.' );
5.      \}
6.    \} );
7.  \} )

复制代码

fnPreDrawCallback：每一次绘datatables时候调用的方法

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "fnPreDrawCallback": function( oSettings ) \{
4.        if ( $('\#test').val() == 1 ) \{
5.          return false;
6.        \}
7.      \}
8.    \} );
9.  \} );

复制代码

fnRowCallback：行的回调函数

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) \{
4.        // Bold the grade for all 'A' grade browsers
5.        if ( aData\[4\] == "A" )
6.        \{
7.          $('td:eq(4)', nRow).html( '<b>A</b>' );
8.        \}
9.      \}
10.   \} );
11. \} );

复制代码

fnServerData：这个是结合服务器模式的回调函数，用来处理服务器返回过来的数据

1.  // POST data to server
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "bProcessing": true,
5.      "bServerSide": true,
6.      "sAjaxSource": "xhr.php",
7.      "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) \{
8.        oSettings.jqXHR = $.ajax( \{
9.          "dataType": 'json',
10.         "type": "POST",
11.         "url": sSource,
12.         "data": aoData,
13.         "success": fnCallback
14.       \} );
15.     \}
16.   \} );
17. \} );

复制代码

fnServerParams：向服务器传额外的参数

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "bProcessing": true,
4.      "bServerSide": true,
5.      "sAjaxSource": "scripts/server\_processing.php",
6.      "fnServerParams": function ( aoData ) \{
7.        aoData.push( \{ "name": "more\_data", "value": "my\_value" \} );
8.      \}
9.    \} );
10. \} );

复制代码

fnStateLoad：读取状态的回调函数

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "bStateSave": true,
4.      "fnStateLoad": function (oSettings) \{
5.        var o;
6.         
7.        // Send an Ajax request to the server to get the data. Note that
8.        // this is a synchronous request.
9.        $.ajax( \{
10.         "url": "/state\_load",
11.         "async": false,
12.         "dataType": "json",
13.         "success": function (json) \{
14.           o = json;
15.         \}
16.       \} );
17.        
18.       return o;
19.     \}
20.   \} );
21. \} );

fnStateLoadParams：和上面的不知道什么区别，没用过

1.  // Remove a saved filter, so filtering is never loaded
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "bStateSave": true,
5.      "fnStateLoadParams": function (oSettings, oData) \{
6.        oData.oSearch.sSearch = "";
7.      \}
8.    \} );
9.  \} );
10. // Disallow state loading by returning false
11. $(document).ready( function() \{
12.   $('\#example').dataTable( \{
13.     "bStateSave": true,
14.     "fnStateLoadParams": function (oSettings, oData) \{
15.       return false;
16.     \}
17.   \} );
18. \} );

fnStateLoaded：又是这个，加了ed 不知道意思没用过

1.  // Show an alert with the filtering value that was saved
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "bStateSave": true,
5.      "fnStateLoaded": function (oSettings, oData) \{
6.        alert( 'Saved filter was: '+oData.oSearch.sSearch );
7.      \}
8.    \} );
9.  \} );

fnStateSave：状态储存

1.  $(document).ready( function() \{
2.    $('\#example').dataTable( \{
3.      "bStateSave": true,
4.      "fnStateSave": function (oSettings, oData) \{
5.        // Send an Ajax request to the server with the state object
6.        $.ajax( \{
7.          "url": "/state\_save",
8.          "data": oData,
9.          "dataType": "json",
10.         "method": "POST"
11.         "success": function () \{\}
12.       \} );
13.     \}
14.   \} );
15. \} );

fnStateSaveParams  ：状态储存参数，没用过，不明白

1.  // Remove a saved filter, so filtering is never saved
2.  $(document).ready( function() \{
3.    $('\#example').dataTable( \{
4.      "bStateSave": true,
5.      "fnStateSaveParams": function (oSettings, oData) \{
6.        oData.oSearch.sSearch = "";
7.      \}
8.    \} );
9.  \} );

[Datatables_sDom]: http://www.javashen.com/forum.php?mod=viewthread&tid=1628&extra=page%3D1