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>

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>

运行代码

doT.js模板和pagination分页应用的更多相关文章

doT js模板入门
doT.js github地址: doT.js 官方站点实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...
doT.js模板引擎及基础原理
时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...
doT js模板入门 2
doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...
doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
doT js模板入门 3
for 循环前推断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"&g ...
doT.js模板用法
前提:引入doT.min.js: <script type="text/javascript" src="js/jquery.js"></sc ...
dot.js模板实现分离式
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选加载翻页笔记
入职以后的第二个任务根据用户所选的价格范围筛选数据修复BUG - 筛选数据后总数没有更新.列表显示错误.翻页加载错误用到的一些知识点 jquery插件系列之 - Slider滑块 max ...

随机推荐

PCB编译时出现的错误（ Duplicate Net Names Wire N000-1 (Inferred)意思就是端口名字没有定义）
再运行这个错误Duplicate Net Names Wire N000-1 (Inferred)的就没有了, 不过还有其他的错误,有错误不用怕,关我的博客解决.
宝塔Linux面板 5.1正式版永久免费
宝塔Linux面板 5.1正式版永久免费2017/06/16 2分钟装好面板,一键管理服务器 Linux版请确保纯净系统安装(支持CentOS.Ubuntu.Debian.Fedora),Web端管理 ...
早期（编译器）优化--javac编译器
java语言的“编译期”其实是一段“不确定”的操作过程,可能是指一个前端编译器把.java变成.class的过程,也可能是指虚拟机的后端运行期编译器(JLT)把字节码转变成机器码的过程,也有可能是使用 ...
手机号是SIM卡的号呢,还是买手机时就带的
可以用原来的号码!把原来的卡装在新手机里就可以了,你的号码没有改变! 手机的号是由sim卡来决定的! 但是卡上的号码显示的是卡的一些信息! 你不用去理会它! 全文:http://iask.sina.c ...
Unity中巧用协程和游戏对象的生命周期处理游戏重启的问题
主要用到协程(Coroutines)和游戏对象的生命周期(GameObject Lifecycle)基础知识,巧妙解决了游戏重启的问题. 关于协程,这里有篇文章我觉得写的非常好,理解起来也很容易.推荐 ...
（转）GPU图形绘制管线
摘抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人”第二章. 图形绘制管线描述GPU渲染流程, ...
[Java] HashMap 源码简要分析
特性 * 允许null作为key/value. * 不保证按照插入的顺序输出.使用hash构造的映射一般来讲是无序的. * 非线程安全. * 内部原理与Hashtable类似. 源码简要分析 pu ...
[Python设计模式] 第7章找人帮忙追美眉——代理模式
github地址:https://github.com/cheesezh/python_design_patterns 题目1 Boy追求Girl,给Girl送鲜花,送巧克力,送洋娃娃. class ...
BigDecimal乘法
BigDecimal result = new BigDecimal(doubleValue).multiply(factor2); public class Payment { BigDecimal ...
MAC OS X显示.开头的文件_苹果操作系统显示隐藏文件命令
转自:http://dditblog.com/blog_446.html 今天在导入Eclipse项目的时候.发现导入不了.初步估计是因为项目没有.project的文件.在Mac OS X操作系统下面 ...

doT.js模板和pagination分页应用

doT.js模板和pagination分页应用的更多相关文章

随机推荐

热门专题