doT.js模闆和pagination分頁應用
部落格中模拟了資料加載初始化的過程。
doT.js渲染每一項内容的資料項。示例如下：
pagination分頁插件的使用，示例如下：
參數說明：
callback：回調方法，點選分頁按鈕的時候執行。
prev_text：上一頁按鈕中的文字顯示内容。
next_text：下一頁按鈕中的文字顯示内容。
items_per_page： 每一頁中顯示的條數。
num_edge_entries：首尾兩側分頁的條數。
num_display_entries：分頁主體顯示的條數。
current_page:： 目前頁數。
DEMO：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dot.js和pagination分頁應用</title>
<style>
*{margin: 0px; padding: 0px;}
.cls{*zoom:1}
.cls:after{display:block;overflow:hidden;clear:both;height:0;visibility:hidden;content:"."}
.MessList{width: 960px;margin: 100px auto 10px; color: #333;}
.MessList .on{
font-weight: bold;
}
.MessListItem{
position: relative;
border:1px solid #f1f1f1;
padding: 20px 30px;
margin-top: -1px;
cursor: pointer;
.MessListItem strong{
display:block;
font-size: 16px;
margin-bottom: 10px;
.MessListItem .words{
.MessListItem p{
float: left;
width: 700px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 30px;
.MessListItem label{
float: right;
text-align: right;
.MessListItem .closed{
position: absolute;
right: 0px;
top: 0px;
z-index: 0;
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #333;
border: 1px solid #333;
background: #999;
.MessListItem .closed:hover{
color: #f00;
border: 1px solid #f00;
background: #fee;
.MessPage{
width: 960px;
margin: 0px auto;
</style>
</head>
<body>
<div id="MessList" class="MessList"></div>
<div id="MessPage" class="MessPage pagination"></div>
<script id="Messtmpl" type="text/x-dot-template">
{{~it.bean:value:index }}
<div class="MessListItem {{?value.read}}on{{?}}" mid="{{=value.id}}">
<strong>{{=value.title}}</strong>
<div class="words cls">
<p>{{=value.message}}</p>
<label>{{=value.time}}</label>
</div>
<a class="closed">X</a>
{{~}}
</script>
<script src="http://files.cnblogs.com/kuikui/jquery-1.10.2.min.js"></script>
<script src="http://files.cnblogs.com/kuikui/dot.min.js"></script>
<link rel="stylesheet" href="http://files.cnblogs.com/kuikui/pagination.css" />
<script src="http://files.cnblogs.com/kuikui/pagination.min.js"></script>
<script type="text/javascript">
$(function(){
var data = {
code:1,
bean:[{
title: "标題1",
message: "标題1，你好，歡迎。。。",
time: "2013-1-21 12:00:00",
read: false
}]
};
for(var i = 0,l =1000;i<l;i++){
data.bean[i] = {
id: (i+1),
title: "标題" + (i+1),
message: (i+1)+"現在，浏覽器幾乎是靜如止水的市場。IE、360、Chrome、Firefox、遨遊、百度和QQ浏覽器的份額已多年未變。除了春運之外，浏覽器玩家們也比較安靜。近日則出現了一條重磅消息：遨遊浏覽器出大招了，發明并推出了廣告快進技術。通過這項技術，使用者可以對視訊前、中插入的廣告進行快進。",
read: i<15?true:false
var MessList = $("#MessList");
var MessPage = $("#MessPage");
var total = data.bean.length; // 總條數
var current = 0; // 目前頁
var pageSide = 10; // 每頁幾條資料
var unRead = 15; // 未讀消息
var MessText = doT.template($("#Messtmpl")[0].text);
function initPage(i){
current = i;
var dataTen = {};
dataTen.bean = [];
var count = 0;
while(count<10){
dataTen.bean.push(data.bean[count+(i*pageSide)]);
count++;
MessList.html(MessText(dataTen));
MessPage.pagination(total, {
callback: initPage,
prev_text: "«",
next_text: "»",
items_per_page: pageSide, // 每頁顯示的條目數
num_edge_entries: 1, //兩側首尾分頁條目數
num_display_entries: 10, //連續分頁主體部分分頁條目數
current_page: current, //目前頁索引
});
initPage(current);
</body>
</html>
運作代碼
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)