express主页右边分页and逻辑

将获取的数据分页

backgroundList.js文件里

var express = require('express')
var router = express.Router()
var db = require('../sql.js')
/* GET home page. */
router.get('/', function (req, res, next) {
  // 收到页数
  var pageNum = req.query.page
  db.query('select * from background ', function (err, data) {
    var pager = {}
    // 当前页码
    pager.pageCurrent = pageNum || 1
    // 总的记录数
    pager.maxNum = data.length
    // 每页显示多少条记录
    pager.pageSize = 5
    // 一共多少页
    pager.pageCount = parseInt(Math.ceil(pager.maxNum / pager.pageSize))
    // 修改了传递的数据数量
    var dataList = data.slice(
      (pager.pageCurrent - 1) * pager.pageSize,
      (pager.pageCurrent - 1) * pager.pageSize + pager.pageSize
    )
    if (err) {
      throw err
    } else {
      res.render('backgroundList', { backgroundList: dataList, pager: pager })
    }
  })
})
module.exports = router

分页逻辑

用bootstrap样式class=”pagination”disabled,active

for循环页码,if&else判断页码

<div class="page">
    <ul class="pagination">
      <% var nextNum=10;var prevNum=10; %>
      <li class="disabled"><a href="javascript:;">共<%= pager.maxNum %>条</a></li>
      <li class="disabled"><a href="javascript:;">总<%= pager.pageCount %>页</a></li>
      <!-- 判断首页 -->
      <%if(pager.maxNum == 0){%>
      <li class="disabled"><a href="javascript:;">首页</a></li>
      <%  }else{ %>
      <li ><a href="/backgroundList?page=1">首页</a></li>
      <%  } %>
      <!-- 判断首页 -->
      <!-- 判断上一页 -->
      <%if(pager.pageCurrent==1){%>
      <li class="disabled"><a href="javascript:;">上一页</a></li>
      <%  }else{ %>           
      <li><a href="/backgroundList?page=<%=parseInt(pager.pageCurrent)-1%>">上一页</a></li>
      <%  } %>
      <!-- 判断上一页 -->
      <!-- 循环显示页码 开始-->
      <% for(var i= prevNum;i > 0;i--) {%>
        <%if(parseInt(pager.pageCurrent)-i >0){%>
      <li><a href="/backgroundList?page=<%=parseInt(pager.pageCurrent)-i%>"><%= parseInt(pager.pageCurrent)-i %></a></li>
      <%  }} %>

      <li class="active"><a href="/backgroundList?page=<%= pager.pageCurrent%>"><%= pager.pageCurrent %></a></li>
      
      <% for(var i=1;i <= nextNum; i++) {%>
        <%if(parseInt(pager.pageCurrent)+i <= pager.pageCount){%>
      <li><a href="/backgroundList?page=<%=parseInt(pager.pageCurrent)+i%>"><%= parseInt(pager.pageCurrent)+i %></a></li>
      <%  }} %>
      <!-- 循环显示页码  结束--> 
      <%if(pager.pageCurrent==pager.pageCount){%>           
      <!-- 判断下一页 -->
      <li class="disabled"><a href="javascript:;">下一页</a></li>
      <%  }else{ %>           
        <li><a href="/backgroundList?page=<%=parseInt(pager.pageCurrent)+1%>">下一页</a></li>
      <%  } %>
      <!-- 判断下一页 -->
      <!-- 判断尾页 -->
      <%if(pager.maxNum == 0){%>
        <li class="disabled"><a href="javascript:;">尾页</a></li>
        <%  }else{ %>
        <li ><a href="/backgroundList?page=<%=pager.pageCount%>">尾页</a></li>
        <%  } %>
      <!-- 判断尾页 -->
    </ul>
  </div>

其他部分

<!DOCTYPE html>
<html>
  <head>
    <title>小电视后台管理系统</title>
    <link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
    <link rel='stylesheet' href='/stylesheets/style.css' /> //express自动生成的公共样式
    <style>
     .page{
        width: 100%;
        padding: 20px;
        color: #fff;
        border-top: 1px solid #ccc;
      }
      .page ul li{
        margin-right: 6px;
      }
</style>
</head>

/stylesheets/style.css

*{margin: 0;padding: 0;}
body {
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
ul{
	list-style: none;
}
a {
  color: #00B7FF;
	text-decoration: none;
}
input{
	border:0px;
	background-color: none;
	outline:none;
}