前接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就無關了。
(跟之前一樣才是....)
