表格插件示例

以下所有例子都可以在 Datatables 中文网例子 查阅。

Bootstrap 风格

引入组件时使用 jq/dataTables-bs3，可以引入 Bootstrap 风格的 Datatables 组件。

<table class="table" id="table_id">
  <thead>
      <tr>
          <th>Column 1</th>
          <th>Column 2</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Row 1 Data 1</td>
          <td>Row 1 Data 2</td>
      </tr>
      <tr>
          <td>Row 2 Data 1</td>
          <td>Row 2 Data 2</td>
      </tr>
  </tbody>
</table>

<script type="text/javascript">
require(['jq/dataTables-bs3'], function() {
  $('#table_id').dataTable();
});
</script>

DOM定位

Datatables 默认会打开部分特性，比如搜索框，分页显示等等。或许你不喜欢 Datatables 这样去布局，可能你想把分页按钮放在底部的中间，搜索框放在顶部的左上角，不用担心，Datatables 考虑到了这个问题。使用 dom 选项就可以灵活配置各个特性的位置

Datatables 定义了10个字符表示不同的组件：

• l - Length changing 每页显示多少条数据选项
• f - Filtering input 搜索框
• t - The Table 表格
• i - Information 表格信息
• p - Pagination 分页按钮
• r - pRocessing 加载等待显示信息
• < and > - div elements 一个div元素
• <"#id" and > - div with an id 指定id的div元素
• <"class" and > - div with a class 指定样式名的div元素
• <"#id.class" and > - div with an id and class 指定id和样式的div元素

需要注意的是，除了 t 以外，其他选项可以指定多次，比如你可以在 thead 和 tfoot 同时定义 f，出现两个搜索框

通过 dom 选项还可以给 Datatables 添加额外的插件，使表格看起来是一个整体，更加美观

下面的示例中，把表格信息放在表格的顶部，其他的都放在表格的底部

<table class="table" id="example-dom">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
        </tr>
        <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012/08/06</td>
            <td>$137,500</td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td>2010/10/14</td>
            <td>$327,900</td>
        </tr>
        <tr>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009/09/15</td>
            <td>$205,500</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008/12/13</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>2008/12/19</td>
            <td>$90,560</td>
        </tr>
        <tr>
            <td>Quinn Flynn</td>
            <td>Support Lead</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2013/03/03</td>
            <td>$342,000</td>
        </tr>
        <tr>
            <td>Charde Marshall</td>
            <td>Regional Director</td>
            <td>San Francisco</td>
            <td>36</td>
            <td>2008/10/16</td>
            <td>$470,600</td>
        </tr>
        <tr>
            <td>Haley Kennedy</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>2012/12/18</td>
            <td>$313,500</td>
        </tr>
        <tr>
            <td>Tatyana Fitzpatrick</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>19</td>
            <td>2010/03/17</td>
            <td>$385,750</td>
        </tr>
        <tr>
            <td>Michael Silva</td>
            <td>Marketing Designer</td>
            <td>London</td>
            <td>66</td>
            <td>2012/11/27</td>
            <td>$198,500</td>
        </tr>
        <tr>
            <td>Paul Byrd</td>
            <td>Chief Financial Officer (CFO)</td>
            <td>New York</td>
            <td>64</td>
            <td>2010/06/09</td>
            <td>$725,000</td>
        </tr>
        <tr>
            <td>Gloria Little</td>
            <td>Systems Administrator</td>
            <td>New York</td>
            <td>59</td>
            <td>2009/04/10</td>
            <td>$237,500</td>
        </tr>
        <tr>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>2012/10/13</td>
            <td>$132,000</td>
        </tr>
        <tr>
            <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>2012/09/26</td>
            <td>$217,500</td>
        </tr>
        <tr>
            <td>Jenette Caldwell</td>
            <td>Development Lead</td>
            <td>New York</td>
            <td>30</td>
            <td>2011/09/03</td>
            <td>$345,000</td>
        </tr>
        <tr>
            <td>Yuri Berry</td>
            <td>Chief Marketing Officer (CMO)</td>
            <td>New York</td>
            <td>40</td>
            <td>2009/06/25</td>
            <td>$675,000</td>
        </tr>
        <tr>
            <td>Caesar Vance</td>
            <td>Pre-Sales Support</td>
            <td>New York</td>
            <td>21</td>
            <td>2011/12/12</td>
            <td>$106,450</td>
        </tr>
        <tr>
            <td>Doris Wilder</td>
            <td>Sales Assistant</td>
            <td>Sidney</td>
            <td>23</td>
            <td>2010/09/20</td>
            <td>$85,600</td>
        </tr>
        <tr>
            <td>Angelica Ramos</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>47</td>
            <td>2009/10/09</td>
            <td>$1,200,000</td>
        </tr>
        <tr>
            <td>Gavin Joyce</td>
            <td>Developer</td>
            <td>Edinburgh</td>
            <td>42</td>
            <td>2010/12/22</td>
            <td>$92,575</td>
        </tr>
        <tr>
            <td>Jennifer Chang</td>
            <td>Regional Director</td>
            <td>Singapore</td>
            <td>28</td>
            <td>2010/11/14</td>
            <td>$357,650</td>
        </tr>
        <tr>
            <td>Brenden Wagner</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>28</td>
            <td>2011/06/07</td>
            <td>$206,850</td>
        </tr>
        <tr>
            <td>Fiona Green</td>
            <td>Chief Operating Officer (COO)</td>
            <td>San Francisco</td>
            <td>48</td>
            <td>2010/03/11</td>
            <td>$850,000</td>
        </tr>
        <tr>
            <td>Shou Itou</td>
            <td>Regional Marketing</td>
            <td>Tokyo</td>
            <td>20</td>
            <td>2011/08/14</td>
            <td>$163,000</td>
        </tr>
        <tr>
            <td>Michelle House</td>
            <td>Integration Specialist</td>
            <td>Sidney</td>
            <td>37</td>
            <td>2011/06/02</td>
            <td>$95,400</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td>Developer</td>
            <td>London</td>
            <td>53</td>
            <td>2009/10/22</td>
            <td>$114,500</td>
        </tr>
        <tr>
            <td>Prescott Bartlett</td>
            <td>Technical Author</td>
            <td>London</td>
            <td>27</td>
            <td>2011/05/07</td>
            <td>$145,000</td>
        </tr>
        <tr>
            <td>Gavin Cortez</td>
            <td>Team Leader</td>
            <td>San Francisco</td>
            <td>22</td>
            <td>2008/10/26</td>
            <td>$235,500</td>
        </tr>
        <tr>
            <td>Martena Mccray</td>
            <td>Post-Sales support</td>
            <td>Edinburgh</td>
            <td>46</td>
            <td>2011/03/09</td>
            <td>$324,050</td>
        </tr>
        <tr>
            <td>Unity Butler</td>
            <td>Marketing Designer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/12/09</td>
            <td>$85,675</td>
        </tr>
        <tr>
            <td>Howard Hatfield</td>
            <td>Office Manager</td>
            <td>San Francisco</td>
            <td>51</td>
            <td>2008/12/16</td>
            <td>$164,500</td>
        </tr>
        <tr>
            <td>Hope Fuentes</td>
            <td>Secretary</td>
            <td>San Francisco</td>
            <td>41</td>
            <td>2010/02/12</td>
            <td>$109,850</td>
        </tr>
        <tr>
            <td>Vivian Harrell</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>62</td>
            <td>2009/02/14</td>
            <td>$452,500</td>
        </tr>
        <tr>
            <td>Timothy Mooney</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>37</td>
            <td>2008/12/11</td>
            <td>$136,200</td>
        </tr>
        <tr>
            <td>Jackson Bradshaw</td>
            <td>Director</td>
            <td>New York</td>
            <td>65</td>
            <td>2008/09/26</td>
            <td>$645,750</td>
        </tr>
        <tr>
            <td>Olivia Liang</td>
            <td>Support Engineer</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2011/02/03</td>
            <td>$234,500</td>
        </tr>
        <tr>
            <td>Bruno Nash</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>2011/05/03</td>
            <td>$163,500</td>
        </tr>
        <tr>
            <td>Sakura Yamamoto</td>
            <td>Support Engineer</td>
            <td>Tokyo</td>
            <td>37</td>
            <td>2009/08/19</td>
            <td>$139,575</td>
        </tr>
        <tr>
            <td>Thor Walton</td>
            <td>Developer</td>
            <td>New York</td>
            <td>61</td>
            <td>2013/08/11</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Finn Camacho</td>
            <td>Support Engineer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/07/07</td>
            <td>$87,500</td>
        </tr>
        <tr>
            <td>Serge Baldwin</td>
            <td>Data Coordinator</td>
            <td>Singapore</td>
            <td>64</td>
            <td>2012/04/09</td>
            <td>$138,575</td>
        </tr>
        <tr>
            <td>Zenaida Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
            <td>2010/01/04</td>
            <td>$125,250</td>
        </tr>
        <tr>
            <td>Zorita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$115,000</td>
        </tr>
        <tr>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$75,650</td>
        </tr>
        <tr>
            <td>Cara Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$145,600</td>
        </tr>
        <tr>
            <td>Hermione Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$356,250</td>
        </tr>
        <tr>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$103,500</td>
        </tr>
        <tr>
            <td>Jonas Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$86,500</td>
        </tr>
        <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>
            <td>Singapore</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$183,000</td>
        </tr>
        <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
$('#example-dom').dataTable({
    "dom": '<"top"i>rt<"bottom"flp><"clear">'
}); 
</script>

不同的分页样式

默认情况下 Datatables 的分页就是上一页、下一页和6个页数按钮，这适合大部分情况。不过也有用户不喜欢这样，Datatables 提供了四个模式供用户选择，通过设置 pagingType 选项来配置

• simple - 只有上一页、下一页两个按钮
• simple_numbers - 除了上一页、下一页两个按钮还有页数按钮，Datatables默认是这个
• full - 有四个按钮首页、上一页、下一页、末页
• full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮

下面的例子展示了full_numbers类型的分页

<table class="table" id="example-paging-type">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-paging-type').dataTable({
    "pagingType": "full_numbers"
});
</script>

保存状态

Datatables 设置 stateSave 选项后，可以保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。

这个状态的保存用了 html5 的本地储存和 session 储存，这样更加有效率。如果你的数据是异步获取的，你可以使用 stateSaveCallback 和 stateLoadCallback 选项。

需要注意的是，这个特性不支持 ie6、ie7。

默认情况下，这个状态会保存2小时，如果你希望设置的时间更长，通过设置参数 stateDuration 来初始化表格。

这个参数值也可以控制是本地储存(0~更大)还是 session 储存(-1)。

下面的例子展示了 Datatables 设置 stateSave 选项初始化后，实现的状态保存：

<table class="table" id="example-state-save">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-state-save').dataTable({
    stateSave: true
});
</script>

功能启用/禁用

如果你不想使用 Datatables 的某项特性，那么你可以禁用它，下面的例子展示了只启用查找功能(默认是启用的)

<table class="table" id="example-enable-disable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-enable-disable').dataTable({
    "paging":   false,
    "ordering": false,
    "info":     false
});
</script>

垂直滚动条

如果在一个固定高度的容器里放 table，这个时候可能需要用到垂直滚动条，才能展示所有数据。

开启垂直滚动条很简单，只要设置 scrollY 和 scrollCollapse 选项即可。

<table class="table" id="example-vertical-scroll">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-vertical-scroll').dataTable({
    "scrollY": "200px",
    "scrollCollapse": "true",
    "paging": "false"
});  
</script>

制定复杂的表头(和并列/合并行)

在使用表格的时候总会遇到要分组列的情况，Datatables 完全支持合并列/合并行，下面的例子告诉你怎么使用：

<table class="table" id="example-rowspan-colspan">
    <thead>
      <tr>
          <th rowspan="2">Name</th>
          <th colspan="2">Information</th>
          <th colspan="3">Contact</th>
      </tr>
      <tr>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-rowspan-colspan').dataTable();
</script>

多个表格

Datatables 可以初始化多个表格，只需要使用 jQuery 的选择器即可。

这些表都是独立（即用户控制一个表上分页不会影响其他表格），但它们共享给定的初始化参数 （例如如果你指定的国际化文件，所有的表将显示你指定的语言)。此外，API 可以一起操作或者独立操作。

下面这个例子展示的是一行代码显示两个表格，通过 table.display 选择器：

<table class="table display" id="">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td>Quinn Flynn</td>
            <td>Support Lead</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>$342,000</td>
        </tr>
        <tr>
            <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>$217,500</td>
        </tr>
        <tr>
            <td>Gavin Joyce</td>
            <td>Developer</td>
            <td>Edinburgh</td>
            <td>42</td>
            <td>$92,575</td>
        </tr>
        <tr>
            <td>Martena Mccray</td>
            <td>Post-Sales support</td>
            <td>Edinburgh</td>
            <td>46</td>
            <td>$324,050</td>
        </tr>
        <tr>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>$75,650</td>
        </tr>
        <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>$183,000</td>
        </tr>
    </tbody>
</table>
<table class="table display" id="">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>$90,560</td>
        </tr>
        <tr>
            <td>Haley Kennedy</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>$313,500</td>
        </tr>
        <tr>
            <td>Tatyana Fitzpatrick</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>19</td>
            <td>$385,750</td>
        </tr>
        <tr>
            <td>Michael Silva</td>
            <td>Marketing Designer</td>
            <td>London</td>
            <td>66</td>
            <td>$198,500</td>
        </tr>
        <tr>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>$132,000</td>
        </tr>
        <tr>
            <td>Angelica Ramos</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>47</td>
            <td>$1,200,000</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td>Developer</td>
            <td>London</td>
            <td>53</td>
            <td>$114,500</td>
        </tr>
        <tr>
            <td>Prescott Bartlett</td>
            <td>Technical Author</td>
            <td>London</td>
            <td>27</td>
            <td>$145,000</td>
        </tr>
        <tr>
            <td>Timothy Mooney</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>37</td>
            <td>$136,200</td>
        </tr>
        <tr>
            <td>Bruno Nash</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>$163,500</td>
        </tr>
        <tr>
            <td>Hermione Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>$356,250</td>
        </tr>
        <tr>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>$103,500</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
$('table.display').dataTable();  
</script>

多列排序

Datatables 允许同时指定多个列排序，有很多不同的方法来实现：

• 用户按住 shift，鼠标分别点击第一列，第二列等等，可以实现多列同时排序。
• 给每列加上 columns.orderData 选项，即如果指定列排序时，第一列有相同数据，则按照第二列排序。
• 使用 columns.orderData 选项给多列排序，比如 [ [0,'asc'], [1,'asc'] ]。
• 使用 order() 方法实现多列排序，详细参见 api

注意，可以使用 orderMulti 选项来禁用用户按住 shift 点击多列排序。

下面这个例子告诉大家怎么使用 columns.orderData 选项来进行多列排序：

<table class="table" id="example-order-multi">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-order-multi').dataTable({
    columnDefs: [ 
      {
        targets: [ 0 ],
        orderData: [ 0, 1 ]  //如果第一列进行排序，有相同数据则按照第二列顺序排列
      },
      {
        targets: [ 1 ],
        orderData: [ 1, 0 ]  //如果第二列进行排序，有相同数据则按照第一列顺序排列
      },
      {
        targets: [ 4 ],
        orderData: [ 4, 0 ]  //如果第五列进行排序，有相同数据则按照第一列顺序排列
      }
    ]
});
</script>

水平和垂直滚动条

同时开启水平和垂直滚动条。

在这个例子中还加入 css 样式 th, td { white-space: nowrap; } ，使文字内容在一行里。

<table class="table" id="example-hr-ver">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Extn.</th>
            <th>E-mail</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            <td>5421</td>
            <td>t.nixon@datatables.net<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script></td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-hr-ver').dataTable({
    "scrollY": 200,
    "scrollX": true
});
</script>

格式化数字显示格式

通过 language.decimal 选项可以配置数字的友好显示，比如1200450，显示为12.004,50。

<table class="table" id="example-decimal">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-decimal').dataTable({
    "language": {
        "decimal":",",
        "thousands":"."
    }
});
</script>

语言国际化

你可以使用 language 选项来国际化 Datatables 的相关信息。

<table class="table" id="example-language">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-language').dataTable({
    "language": {
        "lengthMenu": "每页 _MENU_ 条记录",
        "zeroRecords": "没有找到记录",
        "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
        "infoEmpty": "无记录",
        "infoFiltered": "(从 _MAX_ 条记录过滤)"
    }
});
</script>

隐藏列

有些数据不希望显示在屏幕上，或者需要什么条件才会显示，你可以使用 columns.visible 选项来实现。

被隐藏的列依然是表格的一部分，通过 column().visible() 方法来显示。

被隐藏的列既然是表格的一部分，那么用户也可以搜索和访问被隐藏的列的相关内容。

下面的例子展示了 office 和 age 两列不显示（隐藏的列不会生成 dom，他存在于 DT 的内部数据中），并且不能被搜索到：

<table class="table" id="example-column-visible">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-column-visible').dataTable({
    "columnDefs": [
        {
            "targets": [ 2 ],
            "visible": false,
            "searchable": false
        },
        {
            "targets": [ 3 ],
            "visible": false
        }
    ]
});
</script>

默认排序

在 Datatables 初始化时你可以使用 order 选项指定列怎么排序，order 可以接受多个二维数组数据，数组第一个位置为第几列，第二个位置为标示 asc(升序) 或 desc(降序)。

<table class="table" id="example-order">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-order').dataTable({
    //跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
    "order": [[ 3, "desc" ]]
});
</script>

Datatables自定义事件

Datatables 有几个自定义事件，你可以用代码处理这些，比如当搜索事件触发的时候你要处理什么事情。这个例子演示使用当触发了搜索、排序、分页事件后打印日志：

<div id="demo_info" class="box"></div>
<div class="table-responsive">
  <table class="table" id="example-events">
    <thead>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>
    </thead>
   
    <tfoot>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>
    </tfoot>
   
    <tbody>
      <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
      </tr>
      <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
      </tr>
      <tr>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
      </tr>
      <tr>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
      </tr>
      <tr>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$162,700</td>
      </tr>
      <tr>
          <td>Brielle Williamson</td>
          <td>Integration Specialist</td>
          <td>New York</td>
          <td>61</td>
          <td>2012/12/02</td>
          <td>$372,000</td>
      </tr>
      <tr>
          <td>Herrod Chandler</td>
          <td>Sales Assistant</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
      </tr>
    </tbody>
  </table>
</div>

<script type="text/javascript">
var eventFired = function(type) {
    var n = $('#demo_info')[0];
    n.innerHTML += '<div>' + type + ' 事件- ' + new Date().getTime() + '</div>';
    n.scrollTop = n.scrollHeight;
}
$('#example-events').on('order.dt', function() {
    eventFired('排序');
}).on('search.dt', function() {
    eventFired('搜索');
}).on('page.dt', function() {
    eventFired('翻页');
}).dataTable();
</script>

Html5数据属性

在有些情况下，显示的数据可能不是用来排序的，只是为了直观的展示给用户看，比如电话号码 xxxx-xxxxxxxx，中间有一个斜杠，对于程序排序不怎么好处理。html5有 data-sort 或者 data-order 来排序，data-filter 或者 data-search 来搜索。下面的例子演示了，显示的和搜索的是不同的。

以 Tiger Nixon 为例，显示的是 T. Nixon，搜索的是Tiger Nixon。

<table class="table" id="example-html5-data">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td data-search="Tiger Nixon">T. Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td data-order="1303686000">Mon 25th Apr 11</td>
            <td data-order="320800">$320,800/y</td>
        </tr>
        <tr>
            <td data-search="Garrett Winters">G. Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td data-order="1311548400">Mon 25th Jul 11</td>
            <td data-order="170750">$170,750/y</td>
        </tr>
        <tr>
            <td data-search="Ashton Cox">A. Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td data-order="1231718400">Mon 12th Jan 09</td>
            <td data-order="86000">$86,000/y</td>
        </tr>
        <tr>
            <td data-search="Cedric Kelly">C. Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td data-order="1332975600">Thu 29th Mar 12</td>
            <td data-order="433060">$433,060/y</td>
        </tr>
        <tr>
            <td data-search="Airi Satou">A. Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td data-order="1227830400">Fri 28th Nov 08</td>
            <td data-order="162700">$162,700/y</td>
        </tr>
        <tr>
            <td data-search="Brielle Williamson">B. Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td data-order="1354406400">Sun 2nd Dec 12</td>
            <td data-order="372000">$372,000/y</td>
        </tr>
        <tr>
            <td data-search="Herrod Chandler">H. Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td data-order="1344207600">Mon 6th Aug 12</td>
            <td data-order="137500">$137,500/y</td>
        </tr>
        <tr>
            <td data-search="Rhona Davidson">R. Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td data-order="1287010800">Thu 14th Oct 10</td>
            <td data-order="327900">$327,900/y</td>
        </tr>
        <tr>
            <td data-search="Colleen Hurst">C. Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td data-order="1252969200">Tue 15th Sep 09</td>
            <td data-order="205500">$205,500/y</td>
        </tr>
        <tr>
            <td data-search="Sonya Frost">S. Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td data-order="1229126400">Sat 13th Dec 08</td>
            <td data-order="103600">$103,600/y</td>
        </tr>
        <tr>
            <td data-search="Jena Gaines">J. Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td data-order="1229644800">Fri 19th Dec 08</td>
            <td data-order="90560">$90,560/y</td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">
$('#example-html5-data').dataTable();
</script>

列渲染

这个例子演示了把年龄列隐藏，通过 columns.render 方法把年龄的值拼接到姓名列。

<table class="table" id="example-render">
  <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </tfoot>

  <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
    </tr>
    <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
    </tr>
    <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
$('#example-render').dataTable({
    "columnDefs": [{
        "render": function(data, type, row) {
            return data + ' (' + row[3] + ')';
        },
        "targets": 0
    },
    {
        "visible": false,
        "targets": [3]
    }]
});
</script>

创建行回调

此例子演示了，当工资大于4000的时候用高亮显示，注意 columns.createdCell 选项也可以实现同样的效果。

<table class="table" id="example-created-row">
  <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </thead>
   
  <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </tfoot>
   
  <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
    </tr>
    <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
    </tr>
    <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
$('#example-created-row').dataTable({
    "createdRow": function ( row, data, index ) {
        if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) {
            $('td', row).eq(5).css('font-weight',"bold").css("color","red");
        }
    }
});
</script>

自定义长度菜单的选项

使用 lengthMenu 选项来初始化选项，此选项支持两种参数方式，一种是一维数组，一种是二维数组，此例子演示的是二维数组的用法。

<table class="table" id="example-length-menu">
  <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </thead>
   
  <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </tfoot>
   
  <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
    </tr>
    <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
    </tr>
    <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
$('#example-length-menu').dataTable({
    "lengthMenu": [[2, 4, 6, -1], [2, 4, 6, "All"]]
});
</script>

行分组

此例子演示了以工作地点分组数据，同时隐藏工作地点这一列。

<table class="table" id="example-row-group">
  <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </thead>
  
  <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </tfoot>
  
  <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
    </tr>
    <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
    </tr>
    <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
var tableRowGroup = $('#example-row-group').DataTable({
    "columnDefs": [{
        "visible": false,
        "targets": 2
    }],
    "order": [[2, 'asc']],
    "displayLength": 25,
    "drawCallback": function(settings) {
        var api = this.api();
        var rows = api.rows({
            page: 'current'
        }).nodes();
        var last = null;

        api.column(2, {
            page: 'current'
        }).data().each(function(group, i) {
            if (last !== group) {
                $(rows).eq(i).before('<tr class="group"><td colspan="5">' + group + '</td></tr>');

                last = group;
            }
        });
    }
});
// 根据组排序
$('#example-row-group tbody').on('click', 'tr.group', function() {
    var currentOrder = tableRowGroup.order()[0];
    if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
        tableRowGroup.order([2, 'desc']).draw();
    } else {
        tableRowGroup.order([2, 'asc']).draw();
    }
});
</script>

表格 foot 回调

此例子演示通过 footerCallback 回调函数统计本页工资总数。

<table class="table" id="example-foot-callback">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th colspan="4" style="text-align:right">Total:</th>
            <th></th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>$320,800</td>
        </tr>
        ... ...
    </tbody>
</table>

<script type="text/javascript">
$('#example-foot-callback').dataTable({
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( 4 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            } );

        // Total over this page
        pageTotal = api
            .column( 4, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 4 ).footer() ).html(
            '$'+pageTotal +' ( $'+ total +' total)'
        );
    }
});
</script>

Ajax数据源

Datatables 可以通过 ajax 配置项设置 Ajax 数据源获取 JSON 数据。

<table class="table" id="example-ajax">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
$('#example-ajax').dataTable({
    "ajax": './table-arrays.txt'
});
</script>

JavaScript 数据源

Datatables 也可以直接接受一个 js 数组来初始化表格。

var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
    ['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
    ['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
    ['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
    ['Gecko','Camino 1.0','OSX.2+','1.8','A'],
    ['Gecko','Camino 1.5','OSX.3+','1.8','A'],
    ['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
    ['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
    ['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
    ['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
    ['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
    ['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
    ['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
    ['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
    ['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
    ['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
    ['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
    ['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
    ['Gecko','Epiphany 2.20','Gnome','1.8','A'],
    ['Webkit','Safari 1.2','OSX.3','125.5','A'],
    ['Webkit','Safari 1.3','OSX.3','312.8','A'],
    ['Webkit','Safari 2.0','OSX.4+','419.3','A'],
    ['Webkit','Safari 3.0','OSX.4+','522.1','A'],
    ['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
    ['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
    ['Webkit','S60','S60','413','A'],
    ['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
    ['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
    ['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
    ['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
    ['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
    ['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
    ['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
    ['Presto','Opera for Wii','Wii','-','A'],
    ['Presto','Nokia N800','N800','-','A'],
    ['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],
    ['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
    ['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
    ['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
    ['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
    ['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
    ['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
    ['Misc','NetFront 3.1','Embedded devices','-','C'],
    ['Misc','NetFront 3.4','Embedded devices','-','A'],
    ['Misc','Dillo 0.8','Embedded devices','-','X'],
    ['Misc','Links','Text only','-','X'],
    ['Misc','Lynx','Text only','-','X'],
    ['Misc','IE Mobile','Windows Mobile 6','-','C'],
    ['Misc','PSP browser','PSP','-','C'],
    ['Other browsers','All others','-','-','U']
];

$('#demo-javascript').html( 
    '<table class="table" id="example-javascript"></table>' 
);

$('#example-javascript').dataTable({
    "data": dataSet,
    "columns": [
        { "title": "Engine" },
        { "title": "Browser" },
        { "title": "Platform" },
        { "title": "Version", "class": "center" },
        { "title": "Grade", "class": "center" }
    ]
});

服务器端处理

Datatables 有许多方法来获取你的数据，如果你的数据量比较大，这个时候你需要使用服务器模式来处理你的数据。在服务器模式下，所有的分页，搜索，排序等操作，Datatables 都会交给服务器去处理。所以每次绘制 Datatables，都会请求一次服务器获取需要的数据。

通过配置 serverSide 这个属性来打开 Datatables 的服务器模式，下面的例子展示了 Datatables 打开服务器模式。

<table class="table" id="example-serverside">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
$('#example-serverside').dataTable({
    "processing": true,
    "serverSide": true,
    "ajax": './table-arrays.txt'
});
</script>

数据源属性

当从 Ajax 源加载数据，在默认情况下，数据表将寻找要使用返回的对象的数据参数中的数据（例如 {"data"： [......]}）。通过使用 ajax 选项的 dataSrc 启动选项来改变属性。

dataSrc 有许多用法：

• 作为一个字符串，如 dataSrc: 'myData'
• 为空字符串，如 dataSrc:""，下面的例子展示的是这个用法
• 作为一个方法，如 dataSrc: function(json) {}（您可以从 XML 转换到一个 Javascript 对象）

<table class="table" id="example-data-src">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
$('#example-data-src').dataTable({
    "ajax": {
        "url": "./table-objects_root_array.txt",
        //默认为data,这里定义为空，则只需要传不带属性的数据
        "dataSrc": ""
    },
    "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" }
    ]
});
</script>

嵌套的对象数据

该示例展示了 Datatables 使用对象数据，在最简单的情况下可以读取任意对象的属性，而且只要符合 JavaScript标准，可以扩展到n层的嵌套对象/数组。

下面的 hr 对象包含了 position、salary、start_date 三个属性，contact 包含两个数据，通过数组下标的方式取值。

下面例子的数据模型如下：

{ "name": "Tiger Nixon", "hr": { "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25" }, "contact": [ "Edinburgh", "5421" ] }

<table class="table" id="example-nested-data">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
$('#example-nested-data').dataTable({
    "processing": true,
    "ajax": "./table-objects_deep.txt",
    "columns": [
        { "data": "name" },
        { "data": "hr.position" },
        { "data": "contact.0" },
        { "data": "contact.1" },
        { "data": "hr.start_date" },
        { "data": "hr.salary" }
    ]
});
</script>

延迟渲染数据以提高速度

当处大数据量时，你可以寻求改善 Datatables 的运行的速度。使用 deferRender 选项，可以做到这一点，让 Datatables 延迟渲染。

下面的例子可能感受不到这个参数的效果，但是你可以试试大数据量。

<table class="table" id="example-defer-render">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
$('#example-defer-render').dataTable({
    "ajax": "./table-arrays.txt",
    //当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
    "deferRender": true
});
</script>

正交数据

正交数据，这个直译过来不怎么理解，找了些资料还是不怎么理解，贴单一句英文解释（地址）

In computer terminology, something - such as a programming language or a data object - is orthogonal if it can be used without consideration as to how its use will affect something else.

该例子的数据模型如下：

{ 
"name": "Tiger Nixon", 
"position": "System Architect", 
"salary": "$3,120", 
"start_date": { 
  "display": "Mon 25th Apr 11", 
  "timestamp": "1303682400" 
}, 
"office": "Edinburgh", 
"extn": "5421" 
}

<table class="table" id="example-orthogonal-data">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
$('#example-orthogonal-data').dataTable({
    ajax: "./table-orthogonal.txt",
    columns: [
        { data: "name" },
        { data: "position" },
        { data: "office" },
        { data: "extn" },
        { data: {
            _:    "start_date.display",
            sort: "start_date.timestamp"
        } },
        { data: "salary" }
    ]
});
</script>

为一列生成自定义内容

在某些情况下你可能需要自动创建内容，这时你可以使用 columns.render 参数，来渲染每一行数据。

对于简单的静态的数据可以使用 columns.defaultContent 参数。

本示例演示如何使用 columns.defaultContent 在表的最后一列中创建按钮并添加点击事件，通过 row().data() 方法得到这行的数据，并 alert 出相关信息。

此外注意到列中的 columns.data 选项已被设置为 null，表示列不会获得数据源对象的信息。

<table class="table" id="example-column-content">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

<script type="text/javascript">
var tableColumnContent = $('#example-column-content').DataTable({
    "ajax": "./table-arrays.txt",
    "columnDefs": [{
        "targets": -1,
        "data": null,
        "defaultContent": "<button>Click!</button>"
    }]
});

$('#example-column-content tbody').on('click', 'button', function () {
    var data = tableColumnContent.row( $(this).parents('tr') ).data();
    alert( data[0] +"'s salary is: "+ data[ 5 ] );
});
</script>

设置列宽和列最小宽度以自适应表格

组件库为 jq/dataTables 添加了新功能：支持设置每列的宽度和最小宽度，表格将根据外层容器宽度自适应每列和整个宽度。

需要将 autoWidth 配置项设为 true 以允许表格自适应宽度，并将 scrollX 和 scrollCollapse 配置项设为 true 以显示水平滚动条。宽度和最小宽度设置方式同 CSS 的 width 属性。

<table class="table" id="example-column-width">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>
  
<script type="text/javascript">
$('#example-column-width').dataTable({
    "autoWidth": true,
    "scrollX": true,
    "scrollCollapse": true,
    "ajax": "./table-arrays.txt",
    "columns": [{
        "minWidth": "5.5em" // 最小显示 5 个半字的宽度（一般情况下，两个英文字符计为一个字）
    }, {
        "minWidth": "8em" // 最小显示 8 个字的宽度
    }, {
        "minWidth": "4.5em" // 最小显示 4 个半字的宽度
    }, {
        "width": "2.5em" // 显示 2 个半字的宽度
    }, {
        "width": "5em" // 显示 5 个字的宽度
    }, {
        "width": "5em" // 显示 5 个字的宽度
    }]
});
</script>