(五)、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 ...
随机推荐
- linux下zip文件解压后乱码解决方案
解决办法一,利用pyton来处理 1.vi uzip文件2.复制一下内容(Python) #!/usr/bin/env python # -*- coding: utf-8 -*- # uzip.py ...
- border-radius 样式表CSS3圆角属性
border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...
- 使用spool导出数据
源地址:http://wallimn.iteye.com/blog/472182 set trimspool on set echo off set feedback off set pagesize ...
- C++学习49 对二进制文件的读写操作
二进制文件不是以ASCII代码存放数据的,它将内存中数据存储形式不加转换地传送到磁盘文件,因此它又称为内存数据的映像文件.因为文件中的信息不是字符数据,而是字节中的二进制形式的信息,因此它又称为字节文 ...
- text透明无边框
<input type="text" style="border:0px;background-color:transparent;outline:none;&qu ...
- 安装LINUX X86-64的10201出现链接ins_ctx.mk错误-转自yingtingkun
详细错误信息为: Error in invoking target ‘install’ of makefile ‘/opt/oracle/product/10.2/ctx/lib/ins_ctx.mk ...
- 如何在组件(Component中)模拟用户控件(UserControl)中FindForm()?
using System; using System.Collections.Generic; using System.ComponentModel; using System.ComponentM ...
- HDU1001 关于累加公式的隐性类型转换
HDU 1001就卡了. 受到小白的启发遇到这样的循环题目直接转化成公式求解以优化时间.但是!我就是过不了! 问题代码: #include<stdio.h> int main() { in ...
- poj 2388 Who's in the Middle
点击打开链接 Who's in the Middle Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 28324 Acce ...
- cocso2d-x改变精灵图片
cocos2d-x 改变精灵图片的2种方法. 1. // 首先载入贴图集 CCSpriteBatchNode *spriteBatch=CCSpriteBatchNode::batchNodeWith ...