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都不會與Server端有任何溝通。

這種模式當然也有適用的時候，但對於資料量較大的系統而言，應該是會去避免使用。