分页组件的使用

使用分页组件前先明确几个问题
1、分页组件只是一个组件，肯定不是直接加进去就能用。
2、分页分为前端分页和后端分页，一般都是用后端分页，也就是一次查询一页数据
3、分页组件根据总记录条数和每页记录条数自动分页
清楚这几个问题，问题就迎刃而解了

看代码，这里使用的是element-plus的分页

<template>
    <div class="container">
        <el-table :data="tableData" border>
            <el-table-column prop="c_id" label="ID" width="90" />
            <el-table-column prop="c_name" label="名称" width="85" />
            <el-table-column prop="c_num" label="剩余数量" width="110" />
            <el-table-column prop="c_price" label="价格" width="80" />
            <el-table-column prop="c_total" label="数量" width="90" />
            <el-table-column prop="c_type" label="类型" width="90" />
            <el-table-column prop="shop_id" label="店铺ID" width="90" />
            <el-table-column prop="c_icon" label="商品图片" width="100" />
        </el-table>

        <!-- page-sizes 每页显示个数选择器的选项设置 -->
        <!-- page-size  每页显示条目个数，支持 .sync 修饰符 -->
        <!-- currentPage 刚进入时是第几页（刷新后是第几页）-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="pagesizes" :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper" v-model:total="total">
        </el-pagination>
    </div>
</template>


<script>
export default {
    data() {
        return {
            tableData: [
                
            ],
            currentPage: 1,//现在是第几页 
            pagesizes: [5, 10, 15],
            pagesize: 5,//现在一页有几条
            total: 28,//分页组件根据一共有多少条自动分页，所以这个总条数可以直接请求拿到       
        }

    },
    methods: {
        handleSizeChange(val = 5) {
            //pageSize 改变时会触发
            //回调参数 每页条数
            // this.num = val;
            this.pagesize = val;
            console.log(`每页 ${val} 条`);

            //当改变每页条数的时候，回到第一页重新开始
            this.currentPage=1;
    
            // this.page=1;
            this.request(val,1);            
        },
        handleCurrentChange(val = 1) {
            //currentPage 改变时会触发  点击上一页和下一页时触发
            //回调参数 当前页
            this.currentPage = val;
            console.log(`当前页: ${val}`);
            this.request(this.pagesize,val);
        },
        request(num,page)//参数：在每页多少条的情况下，需要第几页的数据
        {
            console.log(num,page)
            this.$axios({
                methods: "post",
                url: `http://localhost/allphpcode/elementpaginationdemo/response.php?num=${num}&page=${page}`,
            }).then((res) => {
                console.log(res)
                this.tableData = res.data.data;
            }).catch((error) => {
                console.log(error);
            })
        }
    },
    created() {
        // this.handleCurrentChange();
        // this.handleSizeChange();
        //主要根据当前第几页，每页多少条来向后端发起请求获得相应的数据
        this.request(5,1);
    },
}
</script>


<style lang="scss" scoped>
.container {
    padding: 0 200px;
}
</style>

首先是有一个表格，表格的数据来自tableData，表格下面就是分页；
@size-change是pagesize改变时触发的事件，参数的值就是每页多少条；
@current-change是currentPage改变时会触发的事件，也就是点击上一页或者下一页时，参数的值就是当前第几页；
再后面就是把三个属性绑定给相应的值，total是数据库里这张表的总条数，分页组件就是据此自动分页；
layout是组件布局，显示总条数、每页几条的选择器、上一页、当前页、下一页、跳转到第几页

之后js部分有三个函数，
handleSizeChange是pageSize改变时会触发、回调参数是每页条数；
handleCurrentChange是currentPage改变时会触发、点击上一页和下一页时触发、回调参数是当前页；
request是向后端请求表格数据，一次请求一页的表格数据，把请求到的数据赋给tableData，函数的参数是在每页多少条的情况下，需要第几页的数据；created时直接调用了request

后端代码就是一个简单的查询，DB::getInstance()->connect()是一个pdo对象

<?php
require_once './DB.php';

// 跨域问题处理
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE");
header('Access-Control-Allow-Headers:x-requested-with,content-type');

$num = $_REQUEST['num'];
$page = $_REQUEST['page'];

$sql = "select * from commodity where c_id > $num*($page-1) and c_id <= $num*$page";
// echo $sql;

$stmt = DB::getInstance()->connect()->query($sql);
$commodity = $stmt->fetchAll();


$msg = array(
    "code" => "",
    "data" => $commodity,
    "message" => ""
);

if (empty($commodity)) {
    $msg['code'] = 404;
    $msg['message'] = "查找失败";
} else {
    $msg['code'] = 1001;
    $msg['message'] = "查找成功";
}


exit(json_encode($msg));

所以整个流程就是：created时调用请求函数，获取到第一页数据（根据每页多少条、当前第几页）---->分页组件根据相应的参数（数据总条数、刚进入是显示到第几页、显示哪些按钮）加载----->点击上一页或下一页按钮时根据当前第几页获取数据---->改变每页显示条数时，回到第一页，根据当前第一页、每页显示多少条请求数据。

还有就是直接点击页码可以直接跳转到相应的页，Go to也是可以的，这个内部封装好了。

就是这么简单 🤪