去年曾經有幸,短時間加入了X稅局的案子,大部份使用的技術都還算熟悉,像是SpringMVC, JPA, Maven這些東西,比較少接觸的大概是像jquery的眾多plugin,DataTables是其中之一。由於我自已是有習慣的分頁查詢處理模式,在當下我並沒有很喜愛這個Plugin,因為在各方面比較之下,我覺得我常用的模式要寫的程式碼並不會比較多,而且對於我BaseCRUD的操作模式有所影響。所以在prototyping 時我是將我常用的模式硬加在DataTables之上。不過沒幾個星期我就脫離案子,後續也沒再深入瞭解。
不過前段時間又有些新想法,記起了這個jQuery Plugin,稍為試了下順便做些筆記。以下的東西可能會有錯誤的部份…
DataTables的網站請參考:DataTables
最基本的例子,針對目前Html中現有的table加工,讓table裡的資料變得可以被分頁、排序及查詢。
table要注意的部份
(1)應該要有id,或特定的標記,以供DataTables識別出要處理的對象
(2)要有thead,tbody,tfoot的分別,tfoot可有可無,但還是建議加上。
(3)css部份,請import Datatables 提供demo_table.css,並將class設定為”display”
最基本的格式就像下列這樣
<table id="sample" class="display"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Phone</th> </tr> </thead> <tbody> <tr> <td>A12345</td> <td>Adam</td> <td>09301234</td> </tr> <tr> <td>B12345</td> <td>Bob</td> <td>09301234</td> </tr> <tr> <td>C12345</td> <td>Child</td> <td>09301234</td> </tr> </tbody> <tfoot> <tr> <th>ID</th> <th>Name</th> <th>Phone</th> </tr> </tfoot> </table>
再加上javascript
<script type="text/javascript"> $().ready(function() { $("#sample").dataTable(); }); </script>
然後就可以看到下列這樣的結果。
這種分頁的效果算是客戶端分頁,因為必需一次提供所有的資料,除非重新更新頁面,否則無論是換頁或搜尋,Datatables都不會與Server端有任何溝通。
這種模式當然也有適用的時候,但對於資料量較大的系統而言,應該是會去避免使用。