造轮子系列之node+express分页

  分页实现的主要原理就是前端将要显示的页数和每页显示的数据条数传给后端，后端从数据库中查找相应的数据，返回给前端，前端通过 art-template模板渲染。当然模板有很多，但我用的是art-template来渲染的。我是模仿着layui的功能做的，但是没有自己输入页面跳转获取数据的功能。具体效果如下（可能自己写的会有点丑）：

  具体的样式代码我就不做过于详细的介绍了，主要说一下分页处理的部分，这里我是用form表单进行请求的，其中切换每页条数的位置我用的是ajax,代码如下：

HTML

 <form action="/students" method="get" id="form">
	  <input type="hidden" class="curPage" value="{{cur_page}}">
	  <select class="pageSelect" name="pageSize">
	    <option value="10">10条/页</option>
	    <option value="20">20条/页</option>
	    <option value="30">30条/页</option>
	    <option value="40">40条/页</option>
	  </select>
	  <a href="/students?page=1"> 首页 </a>
	  <a href="/students?page={{cur_page-1}}"> < </a>
	  <a href="/students?page={{cur_page+1}}"> > </a>
	  <a href="/students?page={{size}}"> 尾页 </a>
	  共{{size}}页，第{{cur_page}}页
</form>

接口

router.get('/students', function (req, res) {
  Student.find((err,student)=>{
    let curPage=parseInt(req.query.page )|| 1;
    let pageSize=parseInt(req.query.pageSize) || 10;
    let size=Math.round(student.length/pageSize);
    if(curPage>=size){
      curPage=size;
    }else if(curPage<=1){
      curPage=1;
    }
    Student.find(function (err, students) {
      if (err) {
         return res.status(500).send('Server error.')
      }
      res.render('index.html', {
         students: students,
         cur_page:curPage,
         size:size,
      })
     }).sort({date:-1}).limit(pageSize).skip(pageSize*(curPage-1));
   })
})

  肯定有人会想为什么要查询两次数据呢？外面的数据查询是用于计算总的数据条数、分页的总数，里面的数据查询是显示出来的数据。同时我们也需要对前端传过来的page进行处理，当page小于1是让它显示第一页的数据，page大于size(可以显示的总页数)让它显示最后一页的数据。
  切换每页显示条数的数据请求代码如下：

分页请求

<script>
    $(".pageSelect").change(()=>{
        let page=$(".curPage").val();
        let pageSize=$(".pageSelect").val();
        $.ajax({
            url:"/students",
            type:"get",
            data:{page:page,pageSize:pageSize},
            success:(data)=>{
              localStorage.setItem("pageSize",pageSize);
              window.location.href=`/students?page=${page}&pageSize=${pageSize}`;
            }
        })
    })
    let pageSize=localStorage.getItem("pageSize") || 10;
    $(".pageSelect").val(pageSize);
</script>

  当然node实现分页的方法还有很多，但是万变不离其中。如果有兴趣都可以尝试一下，我写的可能也要不对的地方，希望大佬们可以指正。