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. bootStrap中的ul导航2

    <!doctype html><html > <head> <meta charset="utf-8"> <link rel= ...

  2. 20172302《程序设计与数据结构》实验三 敏捷开发与XP实践报告

    课程:<程序设计与数据结构> 班级: 1723 姓名: 侯泽洋 学号:20172302 实验教师:王志强老师 实验日期:2018年5月16日 必修/选修: 必修 1.实验内容 (1)代码规 ...

  3. java给时间格式化

    package com.apress.springrecipes.sequence; import java.text.DateFormat;import java.text.SimpleDateFo ...

  4. 使用 IntraWeb (33) - Cookie

    在 IW.HTTP.Cookie 单元提供有两个相关类: THTTPCookie.TCookieList; 另外 IWServerController 还有一个 CookieOptions 选项. 但 ...

  5. Delphi不注册COM直接使用ActiveX控件并绑定事件

    文笔不行,直接上源码: 主窗口: unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System ...

  6. Unity Shader-后处理：简单均值模糊

    一.简介   今天来学习一下后处理中比较常用的一种效果,屏幕模糊效果.模糊效果,在图像处理中经常用到,Photoshop中也有类似的滤镜.我们在游戏中也会经常用到.因为屏幕模糊效果是一些高级后处理效果 ...

  7. exited abnormally with signal 11: Segmentation fault 的相关处理

    前一阵子遇到一个问题,程序打包后,在某个界面总是崩溃,device log只打印了exited abnormally with signal 11: Segmentation fault 网上找了下相 ...

  8. 根据 train_test.prototxt文件生成 deploy.prototxt文件

    本文参考博文 (1)介绍 *_train_test.prototxt文件与 *_deploy.prototxt文件的不同:http://blog.csdn.net/sunshine_in_moon/a ...

  9. iOS：百度长语音识别具体的封装：识别、播放、进度刷新

    一.介绍 以前做过讯飞语音识别,比较简单,识别率很不错,但是它的识别时间是有限制的,最多60秒.可是有的时候我们需要更长的识别时间,例如朗诵古诗等功能.当然讯飞语音也是可以通过曲线救国来实现,就是每达 ...

  10. ds18b20采集温度并上报服务器

    交叉编译器:arm-linux-gcc-4.5.4 Linux内核版本:Linux-3.0 主机操作系统:Centos 6.5 开发板:FL2440 温度传感器:ds18b20 注:此程序的客户端是在 ...