(五)、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 ...
随机推荐
- oracle decode
decode()函数简介: 主要作用:将查询结果翻译成其他值(即以其他形式表现出来,以下举例说明): 使用方法: Select decode(columnname,值1,翻译值1,值2,翻译值2,.. ...
- Microsoft visual studio中文字样输出
解决办法: 可以尝试下通过: 1.file->高级保存选项-> 2.工具->选项->文本编辑器->自动检测不带签名的UTF-8编码
- [ActionScript 3.0] AS3 绘制正四面体(线条)
package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; im ...
- Servlet中的配置 web.xml
url-pattern配置 可以为同一个Servlet配置多个url-pattern: <servlet> <servlet-name>DoGetPostDemo</se ...
- ckfinder的配置使用
1.单纯的上传图片和预览图片 修改configasp中CheckAuthentication = true; 否则的话会报没有权限或修改配置错误 此时如果可以查看的话,单击图片应该是放大并且预览图片 ...
- POJ - 2533 Longest Ordered Subsequence(最长上升子序列)
d.最长上升子序列 s.注意是严格递增 c.O(nlogn) #include<iostream> #include<stdio.h> using namespace std; ...
- nyoj 76 超级台阶
点击打开链接 超级台阶 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 有一楼梯共m级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第m级,共有多少走法? 注:规 ...
- 项目积累——Strus、Hibernate
在Struts-config.xml中对ActionForm Bean的生命周期用scope进行定义,可用的选项有:pageContext(缺省).request(常用).session.applic ...
- OC基础(27)
单例设计模式 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !import ...
- Android 定时器TimerTask 简单使用
Android平台中需要反复按周期执行方法可以使用Java上自带的TimerTask类,TimerTask相对于Thread来说对于资源 消耗的更低,除了使用Android自带的AlarmManage ...