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就無關了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料