Javascript分页：模拟后台返回数据方法

一、场景

• 我们很多时候需要用到分页场景，但是实际的接口又没有那么多数据，此时，我们就需要写模拟分页数据。此文章就是写了一个方法 getPageData() 用来模拟返回后台的分页数据。

二、代码

<script>
    let page = 1; //默认第1页
    let pageSize = 15; //每页默认记录数15条
    let sizeTotal = 36; //总记录数

    let data = []; //最终的所有数据
    let pageTotal = Math.ceil(sizeTotal / pageSize); //计算总页数
    for (let i = 1; i <= pageTotal; i ++) {
        let pieceData = {id: 1, name: '名称', create_time: 'y-m-d'}; //每一条的数据
        let resultData = getPageData(pieceData, i, pageSize, 'name', sizeTotal);
        data = data.concat(resultData.data); //循环一页，追加数据到data
    }

    console.log(data); //打印 所有的数据

    /**
     * 模拟返回每一页的数据
     * @param pieceData 单条数据：object对象
     * @param page 当前页的数据
     * @param pageSize 每页记录数
     * @param nameField 需要修改的值的字段名（让我们能够区分数据变动了）
     * @param count 总记录数
     * @returns {{data: Array, count: number}} 模拟分页接口返回的结果数据
     */
    function getPageData(pieceData, page, pageSize, nameField, count) {
        let pageData = []; //定义当前页数据
        count = count ? count : 99; //默认99条数据

        let name = pieceData[nameField]; //获取名称值
        let startNumber = (page - 1) * pageSize; //计算起始值

        //如果是最后一页，则pageSize的值可能小于默认值
        if ((page * pageSize) > count) { //如果最后一页的记录大于总页数，则需要重置pageSize
            pageSize = count - startNumber;
        }

        //模拟出page条数据
        for (let i = 1; i <= pageSize; i ++) {
            //给nameField加上后缀，好让我们知道数据已经变动了
            pieceData[nameField] = name + (startNumber+i);

            // console.log(pieceData[nameField]);

            //对象是引用类型，传递的是引用地址，所以你两个数组引用的是同一个对象，只要其中一个数组改变，就会导致对象改变，进而另一个引用的数组也会改
            // pageData.push(pieceData); //此种方式追加：name值异常，得用JSON.parse(JSON.stringify(pieceData))
            pageData.push(JSON.parse(JSON.stringify(pieceData)));

            // console.log(pageData);
        }

        // console.log(JSON.stringify(pageData));

        return {count: count, data: pageData};
    }
</script>

三、打印截图

四、使用Demo

• 小程序商品列表分页实现