DataTables.js是jQuery plugin裡較方便、設定較少的分頁表格功能。Google結果大多只有DataTables.js內容轉成JSON的飯粒，反過來較少，也是筆者在前端不熟稔所致，踹了快一週才找到方法，而且歷經SiteMesh和出現中文亂碼的問題。
先說為何選用JSON作為資料傳遞格式，JSON和XML一樣皆屬通用型格式，同樣意涵的資料在JSON裡表達可能占的空間更少。利用通用型格式可以讓前端與Web Server之間更鬆耦合，前端可以是JSF、Flex…，後端可以是Struts、Spring MVC甚至是.Net平台。
在Servlet端，透過JSONArray.fromObject回傳json資料給前端，而前端的實作在Google時有一點實在很煩，就是落落長的程式碼，所以下面的實作分開講，希望能比較清楚的表達：
| <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html:base/>
<link href="styles/demo_page.css" rel="stylesheet" type="text/css" /> <!-- include相關css和js -->
<link href="styles/demo_table_jui.css" rel="stylesheet" type="text/css" />
<link href="styles/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery/jquery.dataTables.js"></script>
<script type="text/javascript">
function buildTable(tableData) { <!-- 處理JSON的function -->
var tableBody = $("#tableBody"); <!-- tableBody是<tbody>標籤ID,為dataTables.js所用 -->
tableBody.html(""); <!-- 將<tbody>標籤內所有內容含標籤都清空 -->
//add the table rows
$.each(tableData, function(i){ <!-- JSON處理迴圈，匿名function的參數i是取得JSON的{} -->
tableBody.append('<tr></tr>'); <!-- <tbody>後新增一個<tr>標籤空間 -->
var tr = $('tr:last', tableBody); <!-- 在<tbody>取得最後一個<tr> -->
tr.append('<td><input name="" type="checkbox" value="" /></td>'); <!-- <tr>後新增<td> -->
tr.append('<td>' + tableData[i].id + '</td>');
tr.append('<td>' + tableData[i].username + '</td>');
tr.append('<td>' + tableData[i].name_tw + '</td>');
tr.append('<td>' + tableData[i].name_en + '</td>');
tr.append('<td>' + tableData[i].enable_flag + '</td>');
});
}; $(function(){ <!-- jQuery的Ajax處理程式 -->
$("#query").click(function() { <!-- 為button的id query的onclick事件bind一個function -->
dataString = $("#mainForm").serialize(); <!-- 將form data全序列化到一個變數，jQuery特有 -->
$.ajax({ <!-- Ajax主程式 -->
url: 'query.do', <!-- 指定action的url，如無，預設取得form的action屬性 -->
type: 'POST', <!-- 指定form method，如無，預設取得form的method屬性 -->
data: dataString, <!—form input -->
dataType: 'json', <!-- 指定回傳type，包括html,text,xml,script等 -->
success: function(data, status){ <!-- 回傳成功的動作，status是HTTP status -->
buildTable(data); <!-- 呼叫上面的function -->
},
error: function(xhrInstance, status, xhrException) { <!-- 回傳失敗的處理function -->
alert("failure:" + status);
}
});
return false;
});
}); $(document).ready(function() { <!-- 頁面DOM載入完畢後的匿名function -->
oTable = $('#table_grid').dataTable({ <!-- table_grid為<table>標籤ID，指定被dataTable作用 -->
"bJQueryUI": true, <!-- 可套用jQuery UI, 這部份再研究 -->
"sPaginationType": "full_numbers" <!-- 分頁功能設定全有，two_button則只有上下頁兩個 -->
});
} );
</script>
<title>Demo</title>
</head> |
對應的HTML部份內容如下：
| <div class="demo_jui">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_grid">
<thead>
<tr>
<th width="7%"> </th>
<th width="13%">ID</th>
<th width="21%">登入帳號</th>
<th width="19%">中文姓名</th>
<th width="18%">英文姓名</th>
<th width="22%">啟動旗標</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div> |
有別一般<table>下只有<tr>，DataTables.js在這兩者之間加了<thead>和<tbody>以區隔標頭和資料作用，所以才能夠在標頭上設置sort等功能。是故在第一個JavaScript片段，jQuery透過("#table_grid")找到id為table_grid的<table>標籤，再經由dataTable給它可分頁的功能，其它ID亦是如此。
留言列表
