zoukankan      html  css  js  c++  java
  • (五)、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>
    

    最终样式:

  • 相关阅读:
    边工作边刷题:70天一遍leetcode: day 17-1
    边工作边刷题:70天一遍leetcode: day 17
    边工作边刷题:70天一遍leetcode: day 106
    test
    边工作边刷题:70天一遍leetcode: day 18-2
    边工作边刷题:70天一遍leetcode: day 18-1
    边工作边刷题:70天一遍leetcode: day 18
    边工作边刷题:70天一遍leetcode: day 96
    边工作边刷题:70天一遍leetcode: day 19-2
    边工作边刷题:70天一遍leetcode: day 19-1
  • 原文地址:https://www.cnblogs.com/hyqing/p/5029681.html
Copyright © 2011-2022 走看看