DataTables中文網推出了 第一篇 關於DataTables和其餘表格插件比較後，爲了把讓這個比較更有意義，更能幫助到你們，DataTables中文網 作了問卷調查，根據小夥伴們的填寫我概括了一下，一個表格插件關注點在如下三個部分基礎、高級的和進階：javascript
- 基礎
- 排序
- 分頁
- 搜索
- 美觀
- 合理的配置
- 高級
- 單擊和雙擊行事
- 選擇高亮顯示
- 增刪改查
- 列寬拖動
- 數據導出
- 添加序號
- 進階
- 支持的數據類型
- 行內編輯
- 合併單元格
- 自定義表頭
- 高擴展性
- 易用的API
- 模塊化
因此根據以上列出的這些功能點，DataTables中文網至少還會推出三篇文章來說DataTables和DataGrid之間的「優劣」， 從而幫助你們選出適合本身的表格插件。php
因爲我也是初次使用DataGrid，因此在某些方面可能還不能描述的很好， 如發現文章有說得不對或者能夠改進的地方，但願您還能在閱讀完文章後在下方或者經過右下角的反饋發表下本身的見解。 若是以爲本系列文章能幫助到小夥伴們， 但願小夥伴能多多支持本站，多給DataTables中文網提建議，多宣傳DataTables中文網。css
說以前插播一個廣告html
x i
好了，咱們進入正題吧。java
前面一篇講到了分別使用最簡配置，使表格變得更強大，今天咱們要講的就是基礎部分， 對照API，Demo分別實現排序，分頁，搜索，這三個基本功能。jquery
-
DataTables實現排序，分頁，搜索
對於DataTables，其實以前的例子中已經作完了這個步驟，由於默認就開啓了這部分功能，仍是直接看代碼吧服務器
和以前同樣，有以下表格：app
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<table>
<thead> <tr> <th>Code</th> <th>Name</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr> <tr> <td>003</td><td>name3</td><td>4612</td> </tr> <tr> <td>004</td><td>name4</td><td>4612</td> </tr> <tr> <td>005</td><td>name5</td><td>4612</td> </tr> <tr> <td>006</td><td>name6</td><td>4612</td> </tr> <tr> <td>007</td><td>name7</td><td>4612</td> </tr> <tr> <td>008</td><td>name8</td><td>4612</td> </tr> <tr> <td>009</td><td>name9</td><td>4612</td> </tr> <tr> <td>010</td><td>name10</td><td>4612</td> </tr> <tr> <td>011</td><td>name11</td><td>4612</td> </tr> </tbody> </table> |
第一步：引入 DataTables 的js和css模塊化
1 2 3 4 5 6 |
<!--樣式文件-->
<link rel="stylesheet" type="text/css" href="plugin/datatables/jquery.dataTables.min.css"> <!--jquery js--> <script src="plugin/datatables/jquery.js"></script> <!--DataTables 核心 js--> <script src="plugin/datatables/jquery.dataTables.min.js"></script> |
第二步：給表格加上id學習
1 2 3 |
<table id="example" class="display"> …… </table> |
第三步：初始化
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(function () { $('#example').DataTable({ columns:[ {data:"firstname"}, {data:"lastname"}, {data:"phone"} ] }); }); </script> |
只需簡單的一行代碼，DataTables就會幫你把表格配備上排序，翻頁，快速過濾。此次的代碼比以前的要多了列配置，本次先賣個關子， 後面再告訴你們爲何要這樣配置？