jQuery Plugin : DataTables (4)

前接jQuery Plugin : DataTables (3)

如果要讓DataTables完全聽命於Server端，無論大小時都要問過Server時，就要加入“bServerSide“來告訴DataTables。
只要設定“bServerSide“為true之後，無論是換頁、排序、搜尋，DataTables一定會與sAjaxSource聯絡來取得正確的結果。
Server與Client之間的溝通當然必需先講好各自要用的參數，請先參考Server-side processing，下列僅說明必要的部份

Sent to Server Side:

• sEcho : Client端在每次呼叫sAjaxSource時會產生一個特定的sEcho做為驗証碼，Server端必需在JSON中回傳相同的值做為認證
• iDisplayStart ： 目前顯示的是第幾筆資料
• iDisplayLength ： 畫面上單次顯示的資料筆數

Reply from Server Sise:

• sEcho : Client送來的驗証碼，直接回傳不要做改變
• iTotalRecords ： 未經過濾的資料總筆數
• iTotalDisplayRecords ： 經過濾的資料總筆數，但在大部份的使用上情形上幾乎同於iTotalRecords
• aaData : 回傳的資料的JSON Array

所以稍為改一下javascript

	<script type="text/javascript">
		$().ready(function() {
			$("#sample").dataTable({
				"sPaginationType":"full_numbers", //顯示頁數而非僅有上下頁的按鈕
				"bProcessing": true, //在進行ajax呼叫時，會提示Processing，並防止Double submit
				"bServerSide":true,
				"sAjaxSource": '/jquery/DataTableServlet02',
				"aoColumns": [
				              { "mDataProp": "id" },
				              { "mDataProp": "name" },
				              { "mDataProp": "phone" }
				          ]
		});
		});
	</script>

Server這端可以自訂一個TO，再利用jackson這樣的library將TO轉為JSON字串。

public class DataTableTO<T> {
	private List<T> aaData;
	private String sEcho;
	private Integer iTotalRecords;
	private Integer iTotalDisplayRecords;
	//--省略getter/setter.
}

public static final String toJson(DataTableTO<?> dt) {
	ObjectMapper mapper = new ObjectMapper(); //do some registry
	return mapper.writeValueAsString(dt);
}

這樣還未竟全功，畢竟我們在做查詢時多半都是透過一個<Form>來進行。