简单理解实现分页查询

举例分页：每页显示5条数据。
1、
查询 第1页： pageNum=1 pageSize=5.
(pageNum-1)*pageSize = 该页的起始位置
(1-1)*5 =0 ——> limit 0,5
0: 从第1个数据开始 。
5： 每页有5个数据。

select * from sys_user limit 0,5

2、
查询 第2页： pageNum=2 pageSize=5.
(pageNum-1)*pageSize = 该页的起始位置
(2-1)*5 =5 ——> limit 5,5
5: 从第6个数据开始 。
5： 每页有5个数据。

select * from sys_user limit 5,5

3、
查询 第3页： pageNum=3 pageSize=5.
(pageNum-1)*pageSize = 该页的起始位置
(3-1)*5 =10 ——> limit 10,5
10: 从第11个数据开始 。
5： 每页有5个数据。

select * from sys_user limit 10,5

4、简洁代码仅便于理解
template：

<template>
  <div>
      <div style="margin: 10px 0">
          <el-button type="primary" @click="load">搜索</el-button>
      </div>
      <div>
          <el-table 
            :data="tableData">
           <!-- 页面表格 -->
          </el-table>
      </div>
           <div style="padding: 10px 0">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
        </div>
  </div>
</template>
  

script： 当然可用axios

export default {
    
    data(){
    
        return{
    
            pageNum:1,
            username:'',
            pageSize:5,
            total:0,
            tableData:[],         
        }
    },
    methods:{
    
        load() {
    
        // fetch("http://localhost:9090/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&username=" + this.username)
        // .then(res => res.json()).then(res => {
    
        // this.tableData = res.data //数据显示在页面
        // this.total = res.total
        // })
        request.get("http://localhost:9090/user/page" ,{
    
          params:{
    
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            username: this.username
          }
        }).then(res=>{
    
                  this.tableData = res.records;
                  this.total = res.total;
                })
      },
      handleSizeChange(pageSize) {
    
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {
    
        this.pageNum = pageNum
        this.load()
      }
    },
    created(){
    
        this.load();
    }
}

controller：
没有用service。

    @GetMapping("/page")
    public Map<String, Object> findPage(@RequestParam Integer pageNum,
                                        @RequestParam Integer pageSize,
                                        @RequestParam String username) {
    
        pageNum = (pageNum - 1) * pageSize;//该页的起始位置
        username = "%" + username + "%";
        List<User> data = userMapper.selectPage(pageNum, pageSize, username);
        Integer total = userMapper.selectTotal(username);
        Map<String, Object> res = new HashMap<>();
        res.put("data", data);
        res.put("total", total);
        return res;
    }

mapper:

    @Select("select * from sys_user where username like #{username} limit #{pageNum}, #{pageSize}")
    List<User> selectPage(Integer pageNum, Integer pageSize, String username);
    //根据username 进行模糊查询
    @Select("select count(*) from sys_user where username like concat('%', #{username}, '%') ")
    Integer selectTotal(String username);