jQuery Plugin : DataTables (3)

前接jQuery Plugin : DataTables (2)

經過前面的測試，雖然可以改變資料來源為動態而非固定值，但馬上遇到回傳格式的問題。
看看先前回傳的資料

{"aaData":[
	["A123","Adam","0910"],
	["B123","Bob","0819"],
	["C123","Child","0739"]
]}

這不就代表我Server端輸出時還要考慮property的順序？

 

所以當然要試著讓DataTables可以動態的指定每個column要顯示的property.
這就必需在兩邊都有改動。
Server端回傳的格式要改，像是下列這樣

{"aaData":[
	{"id":"A123","name":"Adam","phone":"0910"},
	{"id":"B123","name":"Bob","phone":"0819"},
	{"id":"C123","name":"Child","phone":"0739"}
]}

 

而在Client這端，也必需在呼叫datatable()時，以aoColumns + mDataProp 來設定每個column要顯示的property.

"aoColumns": [
			{ "mDataProp": "id" },
			{ "mDataProp": "name" },
			{ "mDataProp": "phone" }
			]

所以只要用下列的script來處理，就可以達到基本的使用需求

	<script type="text/javascript">
		$().ready(function() {
			$("#sample").dataTable({
				"sAjaxSource": './serverdata.txt',
				"aoColumns": [
				              { "mDataProp": "id" },
				              { "mDataProp": "name" },
				              { "mDataProp": "phone" }
				          ]
		});
		});
	</script>

 

再仔細確認看看，目前所有的操作仍是停留在Client端，接下來就要處理換頁時的Server端呼叫