(五)、nodejs使用bootstrap的样式进行分页
一、page方法
/******************************************************
* Created User:
* Created Time: 2015/12/5.
* 说 明:分页对象
******************************************************/ function Page(config) {
if (!config) {
config = {};
} this.page = config.page || 1;
this.pageSize = config.pageSize || 10;
this.numOfPages = config.numOfPages || 5;
//this.startPage=this.getStartPage();
//this.endPage=this.getEndPage(); if (this.page <= 1) {
this.start = 0;
} else {
this.start = (this.page - 1) * this.pageSize;
}
this.end = this.pageSize * this.page; //if (!config.data) {
// this.data = [];
//} this.totalCount = config.totalCount || 0; /**
* 获取总页码数
* @returns {number}
*/
this.getTotalPage = function () {
return Math.ceil(this.totalCount / this.pageSize);
} /**
* 获取当前开始页面
* @returns {number}
*/
this.getStartPage = function () {
if (this.getTotalPage() < 2) {
return 1;
} else {
var pageStart = (this.page % this.numOfPages === 0) ? (parseInt(this.page / this.numOfPages, 10) - 1) * this.numOfPages + 1 : parseInt(this.page / this.numOfPages, 10) * this.numOfPages + 1;//calculates the start page.
return pageStart;
}
} /**
* 获取当前结束页面
* @returns {number}
*/
this.getEndPage = function () {
if (this.getTotalPage() < 2) {
return 1;
} else {
var pageStart = (this.page % this.numOfPages === 0) ? (parseInt(this.page / this.numOfPages, 10) - 1) * this.numOfPages + 1 : parseInt(this.page / this.numOfPages, 10) * this.numOfPages + 1;//calculates the start page.
var endP = (pageStart + this.numOfPages - 1) > this.getTotalPage() ? this.getTotalPage() : (pageStart + this.numOfPages - 1);
console.log(pageStart + "...." + endP); return endP;
}
}
return this;
}
module.exports = Page;
二、使用方法
首先需要获得记录总条数datas.totalCount
var page = new Page({
page: curpage,//当前页
pageSize: 10,//每页记录数
totalCount: datas.totalCount,//总共记录条数
numOfPages: 5,//显示页码数
startPage: 0,//开始页码
endPage: 0//结束页码
});
page.startPage = page.getStartPage();
page.endPage = page.getEndPage();
三、前端样式(使用的express框架)
<div class="col-sm-12 col-md-12 ">
<% if(page.getTotalPage() > 1){ %>
<div style="text-align: right;float:right;margin: 20px 0;padding: 8px 5px 4px 5px;text-decoration: none;">
共<%= page.getTotalPage() %>页(<%= page.totalCount %>条)
</div>
<ul class="pagination pull-right">
<% if((parseInt(page.page) - 1) < 1){ %>
<li class="disabled"><a href="#">«</a></li>
<% }else{ %>
<li><a href="/category/<%= condition.type %>?ipage=<%= i %>">«</a></li>
<% } %>
<% for(var i = page.startPage;i <= page.endPage ;i++){ %>
<% if(page.page == i){ %>
<li class="active"><a href="/category/<%= condition.type %>?ipage=<%= i %>"><%= i %><span
class="sr-only">(current)</span></a></li>
<% }else{ %>
<li><a href="/category/<%= condition.type %>?ipage=<%= i %>"><%= i %><span
class="sr-only">(current)</span></a></li>
<% } %>
<% } %>
<% if( (parseInt(page.page) + 1) > page.getTotalPage()){ %>
<li class="disabled"><a href="#">»</a></li>
<% }else{ %>
<li><a href="/category/<%= condition.type %>?ipage=<%= (parseInt(page.page) + 1) %>">»</a></li>
<% } %> </ul>
<% } %>
</div>
最终样式:

(五)、nodejs使用bootstrap的样式进行分页的更多相关文章
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
- Bootstrap <基础十九>分页
Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提 ...
- Bootstrap表格样式(附源码文件)--Bootstrap
1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...
- [置顶]
bootstrap自定义样式-bootstrap侧边导航栏的实现
前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...
- Bootstrap -- 按钮样式与使用
Bootstrap -- 按钮样式与使用 1. 可用于<a>, <button>, 或 <input> 元素的按钮样式 按钮样式使用: <!DOCTYPE h ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- 第二百四十五节,Bootstrap标签页和工具提示插件
Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一.标签页选项卡 标签页也就是通常所说的选项卡功能 ...
- 第二百三十五节,Bootstrap栅格系统
Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...
- 第二百三十二节,Bootstrap排版样式
Bootstrap排版样式 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面 主体.对齐.列表等常规内容. 一.页面排版 Boot ...
随机推荐
- Web Service 性能测试工具比较
背景 希望选择一款Web Service性能测试工具,能真实模拟大量用户访问网站时的请求,从而获取服务器当前的请求处理能力(请求数/秒).以微信服务器为例,每个用户用独立的登录token,做各种操作, ...
- 解决CI框架的Disallowed Key Characters错误提示
用CI框架时,有时候会遇到这么一个问题,打开网页,只显示 Disallowed Key Characters 错误提示.有人说 url 里有非法字符.但是确定 url 是纯英文的,问题还是出来了.但清 ...
- dedecms列表页如何让文章列表里面的文章每隔五篇就隔开一段空间
dedecms列表页如何让文章列表里面的文章每隔五篇就隔开一段空间,运用js控制列表样式的方法. 代码如下: <script type="text/javascript"&g ...
- 手机端的各种默认样式比如 ios的按钮变灰色
1.ios按钮变灰色,给按钮加样式: -webkit-appearance: none; 2.有圆角话 ; } 3.去除Chrome等浏览器文本框默认发光边框 input:focus, textare ...
- jQuery.loadTemplate客户端模板
jQuery.Template虽然用起来没有Mustache简洁和方便,还是学习了解一下,做个笔记. 模板可以定义在页面script标签,如下 <script type="text/h ...
- centos7 下安装MongoDB
查看MongoDB的最新版官方下载地址: https://www.mongodb.com/download-center#community 使用wget命令下载安装包 wget https://fa ...
- python wechat_sdk间接性的出现错误OfficialAPIError: 40001,说access_token已过期或者不是最新的。
原因是部署django时使用了多进程,每个进程都会去请求access_token,只有最新的那个有效
- [转载]python中将普通对象作为 字典类(dict) 使用
目前我知道的有两种方法: 1 定义的类继承dict类 例如 class A(dict): pass a = A() a['name'] = 12 2 给自定义的类添加 __setitem__() __ ...
- 关于WinCE流接口驱动支持10以上的端口号(COM10)
一般情况下,WinCE流驱动的索引为0~9.应用程序中,通过CreateFile(_T("XXXN:"),…)打开对应的驱动,N也为0~9.这样看来,似乎在WinCE下同名流驱动个 ...
- IOS开发-文件管理(二)
IOS开发-文件管理(二) 五.Plist文件 String方式添加 NSString *path = [NSHomeDirectory( ) stringByAppen ...