前接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>來進行。