jQuery Plugin : DataTables (5)

前接jQuery Plugin : DataTables (4)

這裡開始的思路跟我早期的想法不一樣，主要原因是在DataTables call ajax 的時刻。
對我先前的BaseCRUD模式而言，在init時就會自DB取得第一頁的資料以供顯示。
如果透過DataTables來處理，就代表不需要在init階段處理這部份。
但無論如何，Search Form的存在還是必要的，DataTables第一次找回來的資料也必需符合Form初始化的選項；也就代表DataTables要能加入目前現有Form的欄位做為參數。

第一步還是先要訂個Form吧，並將submit改掉，改用button呼叫javascript。因為DataTables的聯絡對象是用“sAjaxSource“指定的，所以Form的action就沒有作用了。

	<form id="myform">
	<table>
		<tr><td>NAME:</td><td><input type="text" name="name" /></td></tr>
		<tr><td>ID:</td><td><input type="text" name="id" /></td></tr>
		<tr><td>PHONE:</td><td><input type="text" name="phone" /></td></tr>
		<tr><td colspan="2"><input id="btnSearch" type="button" value="Search" onclick="disTable.fnDraw();"/></td></tr>
	</table>
	</form>

至於disTable.fnDraw()就稍後再解釋。

第二步就要修改DataTables的呼叫，加入fnServerParams。

"fnServerParams": function ( aoData ) {
					$.merge(aoData, $("#myform").serializeArray());
				}

藉用jQuery.merge()，將Form裡的欄位資料加入DataTables ajax呼叫參數中。

第三步為了讓Button能觸發DataTables的更新，所以必需保留被DataTables enhanced 過的變數，然後以var_enhanced.fnDraw();來更新資料修改過的javascript 大約如下

	<script type="text/javascript">
		var disTable; //保留被DataTables enhanced 過的變數
		$().ready(function() {
			disTable = $("#sample").dataTable({
				"sPaginationType":"full_numbers",
				"bProcessing": true,
				"bServerSide":true,
				"sAjaxSource": '/jquery/DataTableServlet02',
				"fnServerParams": function ( aoData ) {
					$.merge(aoData, $("#myform").serializeArray());},
				"aoColumns": [
							  { "mDataProp": "id" },
				              { "mDataProp": "name" },
				              { "mDataProp": "phone" }
				          ]
			});
		});
	</script>

再來就是修改Search method用到的參數，與DataTables就無關了。