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>

运行代码

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

  1. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

  2. doT.js模板引擎及基础原理

    时至今日,基于后端JavaScript(Node.js)和MVC思想也开始流行起来.模板引擎是数据和页面分离工作中最重要的一环,在各大门户网站均有利用到模板引擎. 模板引擎有很多种,但是原理了解也是非 ...

  3. doT js模板入门 2

    doT js 使用{{}} 非常相似于JSP,所以用起来感觉非常亲切,非常顺手 {{–><% }}–>%> 比如: <div id="evaluationtmp ...

  4. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  5. doT.js 模板引擎的使用

    dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...

  6. doT js模板入门 3

    for 循环前推断循环的list是否为空 <script id="invoiceListDot" type="text/x-dot-template"&g ...

  7. doT.js模板用法

    前提:引入doT.min.js: <script type="text/javascript" src="js/jquery.js"></sc ...

  8. dot.js模板实现分离式

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  9. Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记

    入职以后的第二个任务  根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...

随机推荐

  1. Shell中的>/dev/null 2>&1 与 2>&1 >/dev/null 与&>/dev/null 的区别

    默认情况下,总是有三个文件处于打开状态,标准输入(键盘输入).标准输出(输出到屏幕).标准错误(也是输出到屏幕),它们分别对应的文件描述符是0,1,2 .那么我们来看看下面的几种重定向方法的区别: & ...

  2. Django的使用规则

    ORM应该算是Python的一大特色,功能类似于Mybatis或hibernate,但是显示要强大更多 一:terminal下命令行的使用 1.创建一个Project django-admin sta ...

  3. IDA Pro Disassembler 6.8.15.413 (Windows, Linux, Mac)

    IDA: What's new in 6.8 Highlights This is mainly a maintenance release, so our focus was on fixing b ...

  4. zookeeper leader选举机制

    最近看了下zookeeper的源码,先整理下leader选举机制 先看几个关键数据结构和函数 服务可能处于的状态,从名字应该很好理解 public enum ServerState { LOOKING ...

  5. Unity3d之截图方法

    http://blog.csdn.net/highning0007/article/details/37991787 Unity3d之截图方法 分类: Unity3D2013-11-28 17:13  ...

  6. 微信小程序页面带参数跳转及接收参数内容navigator

    功能从index页面跳转到draw页面,并在draw页面获取id及imgUrl index.wxml <navigator class='looks-view' wx:for="{{i ...

  7. C# ConcurrentStack实现

    我们通过C# Queue 和Stack的实现知道Stack是依靠数组实现的,那么ConcurrentStack的栈又是如何实现的了,然后它的线程安全又是怎么做到的了? 来看看其code吧 public ...

  8. dubbo服务启动的方式

    dubbo服务启动的方式: 1.dubbo自带的脚本, 2.直接用main方法启动dubbo的spring容器,参见dubbo-test里的各个例子 3.dubbo的spring boot start ...

  9. 为Docker容器设置http代理

    以下内容复制自:传送门 ,可以直接去该地址查看. HTTP/HTTPS proxy The Docker daemon uses the HTTP_PROXY, HTTPS_PROXY, and NO ...

  10. sql中索引不会被用到的几种情况

    1.查询谓词没有使用索引的主要边界,换句话说就是select *,可能会导致不走索引. 比如,你查询的是SELECT * FROM T WHERE Y=XXX;假如你的T表上有一个包含Y值的组合索引, ...