28 12月 2011

jQuery Plugin : DataTables (2)

在我開發過的系統,沒有一個可以接受一次把所有資料撈出來後在Client上做分頁的。
所以Server端的回應模式一定要能被處理。

先理解DataTables做法的重點。

  1. 要自Server端取得資料,必需要有一個參數“sAjaxSource“指定資料的來源,資料來源可以是文字檔或是PHP,ASP,Servlet等程式的URL
  2. Server端回傳資料的格式,可以是JSON或XML,但以JSON為佳;回傳資料的property名稱要為aaData。
  3. DataTables會將回傳的資料更新table中<tbody></tbody>的部份。
  4. 自Server端取得資料的時機是在呼叫$("#tableId").dataTable();後,所以一開始的<tbody></tbody>內不需要有資料。

以純文字檔做為Server回傳資料的來源做個示範。
先將下列文字存為檔案serverdata.txt
{"aaData":[["A123","Adam","0910"],["B123","Bob","0819"],["C123","Child","0739"]]}

再建一個<tbody>為空的table

	<table id="sample" class="display">
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Phone</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>

最後呼叫DataTables的javascript method.

	<script type="text/javascript">
		$().ready(function() {
			$("#sample").dataTable({
				"sAjaxSource": './serverdata.txt'
		});
		});
	</script>

就可以看到下列的結果
Server Side Response(跟之前一樣才是....)

沒有留言: