分页

分页

排序

数据库支持在查询数据时进行排序

-- order by 字段名称 asc/desc
select * from myuser order by id asc
-- 如果有查询条件，那么排序的规则写到最后
select * from myuser where gender = 1 order by age asc 

asc表示升序排列（默认）
desc表示降序排列

分页

分页：分多次查询数据，每次查询一部分数据
好处：查看方便；前端性能较高

-- limit 从第几条开始查询(从0开始), 每次查询几条
select * from myuser order by id asc limit 1, 2

从第几条开始用n表示
从第几页开始用pagenum表示
每页显示的条数用pagesize表示
*n = (pagenum-1)pagesize

前端分页需要的参数是页码和每页的条数

pagenum 页码
pagesize 每页的条数

app.get('/users', function (req, res) {
  // 页码：第几页
  const pagenum = req.query.pagenum
  // 每页条数
  const pagesize = req.query.pagesize
  // 当前第几条
  const n = (pagenum - 1) * pagesize
  const sql = 'select * from myuser order by id limit ?, ?'
  db.opreateDb(sql, [n, parseInt(pagesize)], function (ret) {
    console.log(ret)
    res.json(ret)
  })
})

总结：前端分页一般会传递两个相关参数：页码和每页的条数，后端的第几条需要公式计算

前端分页

基于layUI提供的页面模块实现分页效果

// 分页效果
layui.laypage.render({
    // 分页条渲染的位置
    elem: 'page',
    // 控制分页布局效果
    layout: ['count', 'prev', 'page', 'next', 'limit'],
    // 控制页面条数的下拉类别的数据
    limits: [2, 10, 20, 30, 40, 50],
    //数据总数
    count: ret.total,
    // 每页的条数
    limit: pagesize,
    // 当前页码
    curr: pagenum,
    // 控制页码的切换(页码变化时触发)
    jump: function (obj, first) {
        // 当点击切换页码时，记录最新的页码和每页条数
        pagenum = obj.curr
        pagesize = obj.limit
        // 第一次触发该函数不调用接口
        if (!first) {
            // 页码和每页条数如果发生变化，需要重新调用接口
            loadArticleList({
                // 表示页码（表示第几页数据）
                pagenum: pagenum,
                // 每页展示的条数
                pagesize: pagesize
            })
        }
    }
})

总结：
1.实现页面的分页布局效果
2.控制分页的接口调用