JQuery 分頁 小測試 ( load template json)
<html>
<head>
<script language="javascript" src="jquery-1.10.2.min.js" ></script>
<script language="javascript" >
function loadPage(pageName){
$('#show').load(pageName);
}
</script>
</head>
<body>
<div id="show" width="100%" >
TEST AREA
</div>
<input type="button" value="test1" onclick="loadPage('html1.html')" />
<input type="button" value="test2" onclick="loadPage('html2.html')"/>
<input type="button" value="test3" onclick="loadPage('html3.html')"/>
<input type="button" value="test4" onclick="loadPage('html4.html')"/>
</body>
</html>
(index.html)以上是最簡單用 JQuery load 去讀不同頁面的 檔案來做分頁呈現,但是網網分頁都是一樣的版型,那麼這時候最好用tamplate 去做,那麼JQuery是有提供tamplate 的用法 ,以下是tamplate 的sample code(templateTest.html)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Templates Lab 1 - tmpl()基本示範</title>
<script language="javascript" src="jquery-1.10.2.min.js" ></script>
<script src="./jquery.tmpl.js"
type="text/javascript"></script>
<script src=".JSON-js-master/json2.js"
type="text/javascript"></script>
<script type="text/x-jquery-tmpl" id="tmplItem">
<tr><td>${No}</td><td>${Name}</td><td>${Score}</td></tr>
</script>
<script type="text/javascript">
$(function () {
//宣告簡單的資料物件陣列
var data = [
{ No: 1, Name: "Jeffrey", Score: 59 },
{ No: 2, Name: "Darkthread", Score: 75 },
{ No: 3, Name: "Linda", Score: 96 }
];
$("#jsonArea").text(JSON.stringify(data))
//傳入data為Array時，傳回結果��個集合
$("#tmplItem").tmpl(data).each(function () {
alert(this.innerHTML);
});
//將結果附加到DOM顯示出來
$("#tmplItem").tmpl(data).appendTo("#tb");
//不另外宣告<script>區塊放樣版，直接內嵌範本HTML也��可行的
//但由於內嵌HTML的.html()才算真正範本的部分，所以外面要加一個容器
//一般<li> <span> <div>，外曾層再用一個<div>或<span>包起來就可以
//本例中因為��<tr>，要用<tbody>才算嚴謹，再不然用<script>包夾也可以
$("<tbody><tr><td colspan='3'>${No}.${Name} => ${Score}</td></tr></tbody>")
.tmpl(data).appendTo("#tb");
//或者，我們也可以將範本HTML藏在網頁中，一樣用selector去找到它，
//但��必須用display:none或其他方法藏起來
//相較之下，我認為還��<script type="text/x-jquery-template">最方便
$("#hiddenTemplateDOM").tmpl(data).appendTo("#tb");
});
</script>
</head>
<body>
<!-- 資料套用範本後，附加到<tbody id="tb">顯示出來 -->
<table><tbody id="tb"></tbody></table>
<!-- 以下示範Template藏在網頁內部 -->
<table style="display:none"><tbody id="hiddenTemplateDOM">
<tr style="background-color:#cccccc">
<td>${No}</td><td colspan="2">${Name} - ${Score}</td>
</tr>
</tbody></table>
<div id="jsonArea"></div>
</body>
</html>
基本上可以看出,只要資料格式相同,就可以一直套用,相對減少重複的程式碼,和loading,可是資料來源不可能都寫在程式碼中,那麼我們準備4個.json的檔案 格式如下(data1.json , data2.json)
[
{
"No": 4,
"Name": "tony",
"Score": 88
},
{
"No": 5,
"Name": "tim",
"Score": 90
},
{
"No": 6,
"Name": "dio",
"Score": 23
}
]
那麼利用動態讀 json檔案,來控制分頁程式碼如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Templates Lab 1 - tmpl()基本示範</title>
<script language="javascript" src="jquery-1.10.2.min.js" ></script>
<script src="./jquery.tmpl.js"
type="text/javascript"></script>
<script src="./JSON-js-master/json2.js"
type="text/javascript"></script>
<script type="text/x-jquery-tmpl" id="tmplItem">
<tr><td>${No}</td><td>${Name}</td><td>${Score}</td></tr>
</script>
<script type="text/javascript">
$(function () {
//宣告簡單的資料物件陣列
var data = [
{ No: 1, Name: "Jeffrey", Score: 59 },
{ No: 2, Name: "Darkthread", Score: 75 },
{ No: 3, Name: "Linda", Score: 96 }
];
show(data);
});
function show(data){
$('#tb').empty();
//傳入data為Array時，傳回結果��個集合
$("#tmplItem").tmpl(data).each(function () {
//alert(this.innerHTML);
});
//將結果附加到DOM顯示出來
$("#tmplItem").tmpl(data).appendTo("#tb");
}
function loadData(dataName){
$.getJSON(dataName, function(data) {
show(data);
});
}
</script>
</head>
<body>
<!-- 資料套用範本後，附加到<tbody id="tb">顯示出來 -->
<table><tbody id="tb"></tbody></table>
<input type="button" value="test1" onclick="loadData('data1.json')" />
<input type="button" value="test2" onclick="loadData('data2.json')"/>
<input type="button" value="test3" onclick="loadData('data3.json')"/>
<input type="button" value="test4" onclick="loadData('data4.json')"/>
</body>
</html>
範例下載
留言
張貼留言