可以輕鬆幫你套出有各欄位排序的資料表，
包含搜尋跟分頁的功能，
只是要套用其他CSS的話需要去修改class及css檔案內容，
如果有研究成功的話再另開一篇介紹，
資料來源官方有提供很多example，
包含AJAX、JS array、DOM等等的方式，
下面範例是應用AJAX讀取JSON檔案的方式，
dataTable.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css" title="currentStyle">
@import "../css/dataTable/demo_page.css";
@import "../css/dataTable/demo_table.css";
</style>
<script type="text/javascript" language="javascript"
src="../js/dataTable/jquery.js"></script>
<script type="text/javascript" language="javascript"
src="../js/dataTable/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable({
"bProcessing" : true,
"sAjaxSource" : '../source/dataTable/arrays.txt'
});
});
</script>
</head>
<body>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display"
id="example">
<thead>
<tr>
<th width="20%">Account</th>
<th width="20%">Password</th>
<th width="15%">Sex</th>
<th width="15%">Age</th>
<th width="15%">Job</th>
<th width="15%">Level</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
arrays.txt
{
"aaData":[
[
"found12344",
"sjidwiehiwehiw",
"man",
"25",
"teacher",
"5"
],
[
"d1872yhj3",
"ssdfr1232323",
"man",
"27",
"engineer",
"2"
],
[
"john1123",
"wewdssdf11223",
"man",
"34",
"doctor",
"4"
],
[
"suan908333",
"wedbgfbfg",
"woman",
"17",
"student",
"1"
],
[
"amy87fefe233",
"wedddd",
"woman",
"24",
"dancer",
"8"
]
]
}
最後呈現的結果如下：
沒有留言:
張貼留言