(五)、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 ...
随机推荐
- SQL Server 2005中的分区表(六):将已分区表转换成普通表(转)
我的俄罗斯名叫作“不折腾不舒服斯基”,所以,不将分区表好好折腾一下,我就是不舒服. 在前面,我们介绍过怎么样直接创建一个分区表,也介绍过怎么将一个普通表转换成一个分区表.那么,这两种方式创建的表有什么 ...
- 反人类的MyEclipse之-MyEclipse设置Console字体大小
Windows-->Preference-->General-->Apperence-->Colors and Fonts --> Debug -->Console ...
- [kuangbin带你飞]专题九 连通图
ID Origin Title 76 / 163 Problem A POJ 1236 Network of Schools 59 / 177 Problem B UVA 315 Ne ...
- Windows server 2008 下iis7 架设ftp服务器
架设了一天的ftp服务器,终于搞定了. 按着windows server 2003的思路在windows server 2008把ftp设置好后,登录过程老是出现:530 User cannot lo ...
- (*medium)LeetCode 211.Add and Search Word - Data structure design
Design a data structure that supports the following two operations: void addWord(word) bool search(w ...
- ELK+redis集群搭建
ELK版本: logstash-1.4.2 kibana-4.0.3 redis-3.0.0 elasticsearch-1.4.4(最低版本) 分别启动命令: redis-server redis. ...
- js定时器、高亮修改单元格背景色
window.setInterval() 功能:按照指定的周期(以毫秒计)来调用函数或计算表达式. 语法:setInterval(code,millisec) 解释:code:在定时时间到时要执行的J ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- OSGI.NET 插件启动方法
在使用OSGI.NET框架来开发插件过程中,有时为了测试一个插件,或运行一个插件,需要启动主个插件,如果没有主窗口程序,那么该 如何启动一个插件,而不是再开发一个主窗口程序(那样是不是太麻烦,仅仅是为 ...
- AX在query中添加自己的函数
在自己新建的Query中,想添加自己提供的函数,我们可以在系统的标准类SysQueryRangeUtil中添加自己写的函数 然后在Query的Range中按照格式(method())进行调用