jQuery Plugin : DataTables (1)

 
去年曾經有幸,短時間加入了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 Demo
這種分頁的效果算是客戶端分頁,因為必需一次提供所有的資料,除非重新更新頁面,否則無論是換頁或搜尋,Datatables都不會與Server端有任何溝通。
這種模式當然也有適用的時候,但對於資料量較大的系統而言,應該是會去避免使用。
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料