jQuery Plugin : DataTables (6)

前接jQuery Plugin : DataTables (5)

再來就是DataTables比較費工的地方。
大部份遇到的案子，Table/Grid裡除了顯示，通常還要可以加上checkbox, radio, button, link等操作，以提供多個選取刪除，單選編輯等功能。
這也是我覺得使用了DataTables，程式碼實際不會少多少，開發效率提昇待議的部份，但也可能是我能力的問題，若有大德能指引明燈，小弟會非常感激。

以下以在table裡加上checkbok與button的操作為例，
DataTables裡要多加Column就必需在aoColumns裡以mDataProp標示，由於資料並非自JSON Object裡取得，所以就必需設定為null.
而要顯示自訂的資料，就必需提供"fnRender"這個callback method，其中僅有一個參數oObj，oObj其中的aData就是目前這個Row的JSON Object，所以就可取得你要想的資料。

所以修改一下javascript的aoColumns:

"aoColumns": [
				{ "mDataProp": null, "fnRender": function(oObj){ return "<input type='checkbox' name='id' value='"+oObj.aData.id+"'>"}, "sWidth":"5%", "bSortable":false },
				{ "mDataProp": "id" },
				{ "mDataProp": "name" },
				{ "mDataProp": "phone" },
				{ "mDataProp": null, "fnRender": function(oObj){ return "<input type='button' value='Edit'>"}, "sWidth":"5%", "bSortable":false }
			]

當然對應的Table也要改一下Column的設定

完整的程式碼如下：

	<script type="text/javascript">
		var disTable;
		var gaiSelected = [];
		$().ready(function() {
			disTable = $("#sample").dataTable({
				"sPaginationType":"full_numbers",
				"bProcessing": true,
				"bServerSide":true,
				"sAjaxSource": '/jquery/DataTableServlet02',
				"fnServerParams": function ( aoData ) {
					$.merge(aoData, $("#myform").serializeArray());},
				"aoColumns": [
							  { "mDataProp": null, 
							  	"fnRender": function(oObj){ 
							  		return "<input type='checkbox' name='id' value='"+oObj.aData.id+"'>"}, 
							  	"sWidth":"5%", 
							  	"bSortable":false },
							  { "mDataProp": "id" },
				              { "mDataProp": "name" },
				              { "mDataProp": "phone" },
				              { "mDataProp": null, 
				              	"fnRender": function(oObj){ 
				              		return "<input type='button' value='Edit'>"}, 
				              	"sWidth":"5%", 
				              	"bSortable":false }
				          ]
			});
		});
	</script>
	<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>
	<table id="sample" class="display">
		<thead>
			<tr>
				<th>Select</th>
				<th>ID</th>
				<th>Name</th>
				<th>Phone</th>
				<th>Function</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>

產生的畫面就像下列這樣：

看起來似乎還不錯？不過大家實際遇到的例子應會比這更複雜吧，例如依不同的tag顯示不同的圖片，不同的狀態顯示不同的Button，這些全要寫在script中耶....