前端框架

<div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
 

        :total="total"
        style="width: 120px"
      >
      </el-pagination>
    </div>

 currentPage: 1,
      total: "",
      size: 5,

設定每頁行數和頁碼

 //分頁時修改每頁的行數,這裡會自動傳入一個size
    handleSizeChange(val) {
      console.log(`每頁 ${val} 條`);
      //修改當前每頁的資料行數
      this.size = val;
      //資料重新分頁
      this.queryByPage(this.currentPage, this.size);
    },
    //調整當前的頁碼
    handleCurrentChange(val) {
      console.log(`當前頁: ${val}`);
      //修改當前的頁碼
      this.currentPage = val;
      //資料重新分頁
      this.queryByPage(this.currentPage, this.size);
    },
 

分頁查詢方法

 //通過分頁查詢使用者
    queryByPage(currentPage, size) {
      this.$axios({
        url: "/user/getUserAllByPage/" + currentPage + "/" + size,
        method: "post",
      }).then((res) => {
        console.log(res.data);
        //此頁使用者傳值
        this.Users = res.data.userInfo;
        console.log(res.data.total);
        //使用者數量
        this.total = res.data.total;
      });
    },
 

初始化查詢方法

mounted() {
    this.queryByPage(this.currentPage, this.size);
  },

後端Mapper

<!--分頁-->
    <select id="queryAll" resultMap="UserMapper">
        select user_id,city_name,car_name,date,linkman,phone,state
        from user,city,car
        where user.city_id=city.city_id and user.car_id=car.car_id
        order by user_id ASC
            LIMIT #{Page},#{size};
    </select>

因為此查詢控制了每頁查詢數量所以不能查出所有數量 ，要想顯示共幾條資訊，做數量統計

 <!--查詢使用者數-->
    <select id="selectCount" resultType="java.lang.Integer">
        SELECT count(*) from user
    </select>

Controller要接收當前頁及當前頁顯示數量

 /**
     * 分頁查詢
     */
    @PostMapping("/queryAll/{currentPage}/{size}")
    public JSONObject getFlight(@PathVariable("currentPage") int currentPage,@PathVariable("size") int size) {
        return userService.queryAll(currentPage, size);
    }

後端要返回查詢的資訊陣列+數量統計 故返回值應用JSONObject

public JSONObject queryAll(int currentPage, int size) {
        int Page=(currentPage-1)*size;
        JSONObject res=new JSONObject();
        List<User> users=userMapper.queryAll(Page,size);
        int total=userMapper.selectCount();
        res.put("userInfo",users);
        res.put("total",total);
        return res;
    }