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>
