您的位置：首页 > Web前端 > JavaScript

doT.js模板和pagination分页应用

2014-02-23 21:35 281 查看

doT.js模板和pagination分页应用

博客中模拟了数据加载初始化的过程。
doT.js渲染每一项内容的数据项。示例如下：

<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>
</div>
{{~}}
</script>

pagination分页插件的使用，示例如下：

MessPage.pagination(total, {
callback: initPage,
prev_text: "«",
next_text: "»",
items_per_page: pageSide,
num_edge_entries: 1,
num_display_entries: 10,
current_page: current
});

参数说明：
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;
cursor: pointer;
}
.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> </div> {{~}} </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浏览器的份额已多年未变。除了春运之外，浏览器玩家们也比较安静。近日则出现了一条重磅消息：遨游浏览器出大招了，发明并推出了广告快进技术。通过这项技术，用户可以对视频前、中插入的广告进行快进。",
time: "2013-1-21 12:00:00",
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);
});
</script>

</body>
</html>

运行代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航