(五)、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>

最终样式:

时间: 2024-10-11 13:11:42

(五)、nodejs使用bootstrap的样式进行分页的相关文章

Bootstrap &lt;基础十九&gt;分页

Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提供的处理分页的 class. Class 描述 示例代码 .pagination 添加该 class 来在页面上显示分页. <ul class="pagination"> <li><a href="#">«</a><

全栈JavaScript之路( 二十五 )访问元素的样式

任何支持style 特性的元素在 ,在其DOM  节点 对象中都有一个 style 属性与之对应. 这个style 对象是 CSSStyleDeclaration类型的实例,包含着html style特性的所有样式信息.但不包含 外部样式或者 内嵌样式层叠而来的样式. 在style特性中,提定的任何css属性,都将表现为这个style 对象的属性.对于使用短划线的的属性名,必须转化为驼峰大小写形式,多数情况下都可以这样转换. 也有例外, float 是javascript 关键字,不能直接转换,

无样式简单分页

只需要返回的类型为PageList均可调用此分页,不需要引用,所以我叫他简单分页,样式简单,虽然没有其他的样式花哨,但用起来也很顺手,所以也记一下,以便以后方便使用吧 代码(写在需要分页的位置) 1 <div id="Pager"> 2 <div> 3 当前第 @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) 4 页 共 @Model.PageCount 页 5 @if (Model.

读《精通css》--第五章对链接应用样式

一. 基于层叠对链接选择器进行排序: L :link     V :visited    H :hover    F :focus    A a:active 锚链接选择器:L.V.只适用于锚点. 动态选择器:H.F.A.兼容性问题考虑. 选择器的次序之所以重要是由CSS的层叠引起的,当两个选择器具有相同的特殊性时,后定义的会覆盖前面的. 二. 创建应用了样式的链接下划线: 1.简单的:加粗.加下划线.自定义下划线的样式(变成虚线) 2.奇特的:添加背景图片. 三. 使用属性选择器对外部链接应用

基于Nodejs+Angular+Bootstrap+MySQL的CRM

项目地址:https://github.com/YangZhouChaoFan/NodeCRM 描述:基于Nodejs+Angular+Bootstrap+MySQL的CRM install 先导入数据库sql文件,更改数据库账号,在.config配置文件中修改 安装后端nodejs需要的包 npm install --registry=http://registry.npm.taobao.org 安装前端需要的js类库 bower install 启动服务 npm start

bootstrap table两种分页需要的数据不同

先上原帖地址:http://blog.csdn.net/tyrant_800/article/details/50269723 问题描述: 调用$("#show_list_table").bootstrapTable("refresh");刷新table以后,搜索条件可以传入,也请求到了数据,但是就是不在table中展示数据. 最后发现是因为服务器端分页和客户端分页需要的json格式不一样. 原帖内容: 服务器分页/客户端分页的转换,table刷新 bootstra

Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="

基于mvcpager的分页(get请求,刷新页面),提供两种样式(来自bootstrap的样式)

使用方法:先把mvcpager.dll引用加入mvc项目 下载路径在本文末尾 前台代码 前台: @{ Layout = null; } @using Webdiyer.WebControls.Mvc @model PagedList<string> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /&

datatables的Bootstrap样式的分页怎么添加首页和尾页(引)

找到dataTables.bootstrap.js(版本3):(此项目中文件名为:dataTableExt.js) 1 $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) 2 { 3 return { 4 "iStart": oSettings._iDisplayStart, 5 "iEnd": oSettings.fnDisplayEnd(), 6 "iLength": oS