前端分页功能实现方法

一、前端实现思路

1.前端调用接口获取到全部数据，设定每页显示条目个数

2.通过全部数据及每页显示条目个数得到总页数

3.通过事件监听换页，并获得每页的条目

两种情况：

(1)全部数据只够展示一页

(2)除了第一页的其他页，数据通过算法截取

例如：第1页为前10个

第2页为11-20个

第3页为21-30个 以此类推

可以得到 11 = 2 * 10 - 9   -- 20 = 2 * 10

                21 = 3 * 10 - 9  -- 30 = 3 * 10

//总页数
const totalPage = Math.ceil(数据的长度 / 10)

//第一页
const pageOne = (arr)=>{
    const data = []
    for(let i = 0; i < 10 && i < arr.length; i++) {
        data.push(arr[i])
    }
    return data
}


//第n页 n > 1
const pageGreaterOne = (val,arr)=>{
    const data = []
    for(let i = val * 10 - 10; i < val * 10 && i < arr.length; i++) {
        data.push(arr[i])
    }
    return data
}

二、后端和前端配合实现思路

1.前端调用接口获取到全部数据的长度，设定每页显示条目个数

2.通过全部数据长度及每页显示条目个数得到总页数

3.通过事件监听换页，并获得每页的条目

两种情况：

(1)全部数据只够展示一页

(2)除了第一页的其他页

通过后端代码实现

// 获取对应身份个数 需要前端传递identity参数
exports.getAdminCount = (req, res) => {
    const sql = 'select * from users where identity = ?'
    db.query(sql,[req.body.identity], (err, results) => {
        if (err) return res.cc(err)
        res.send({
            length: results.length
        })
    })
}

// 监听换页返回数据  页码pager
//需要前端传递identity和当前的pager
exports.returnListData = (req,res)=>{
    const {identity,pager} = req.body
    const sql = `select * from users where identity = ? limit 1 offset ${pager}`
    db.query(sql,identity, (err, results) => {
        if (err) return res.cc(err)
        res.send(results)
    })
}

语法解释：

limit为截取多少数据   limit =1 的意思为当前pager只展示一条数据

offset为从何处截取

如果pager = 2 那么就是查找user表中的identity从第3行(数据表从0开始)开始截取1行(limit=1)