Datatables之开篇

来源：互联网发布：淘宝买官换机哪家靠谱编辑：程序博客网时间：2024/06/10 20:59

这段时间在做一个web项目的时候，做为菜鸟级别的我，初次接触到了Datatables这个插件，这个插件确实非常强大，基本上你想要的功能它全部都给你提供好了，只是官网给出的例子比较局限，所以当初我刚开始用的时候也是碰到了各种各样的问题，现在项目差不多要完工了，也是时候整理一下我在项目中使用到的Datatables的技术了。

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
（1）分页，即时搜索和排序
（2）几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理
（3）支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
（4）各式各样的扩展: Editor, TableTools, FixedColumns ……
（5）丰富多样的option和强大的API
（6）支持国际化
（7）超过2900+个单元测试
（8）免费开源（ MIT license ）！商业支持
其中Editor部分功能很强大，可以实现在表格中实时更新数据等功能，可惜这部分我没有实际使用到。

更多的介绍大家可以到官网：http://www.datatables.net/，或者是Datatables中文网：http://dt.thxopen.com/ 看。

下面先简要介绍一个Datatables最基本的使用。在使用最基本的功能这前，请先包含以下两个文件：

（1）//code.jquery.com/jquery-1.11.1.min.js
（2）//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js

js代码如下：

$(document).ready(function() {   $('#example').dataTable();});

html代码如下：

<table id="example" class="display" cellspacing="0" width="100%">        <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>        </tbody>    </table>

datatables表格的实现效果如下：

0 0