分页功能实现

实现列表数据的翻页功能有两种实现方式，一种为后端实现，另外一种为前端实现，推荐后者，因为前端实现可能就需要两个单词，后端却要写很多代码

一、后端实现方式

使用java+mybatis

要实现的效果

接口传入pageNum和pageSize返回数据库里面的结果

上代码

controller层

package com.example.demo.controller;

import com.example.demo.bean.GeneralResult;
import com.example.demo.dao.ProductMapper;
import com.example.demo.entity.Page;
import com.example.demo.entity.Product;
import com.example.demo.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;

@RestController
@ResponseBody
@RequestMapping(value = "/api")
public class ProductController {
    @Autowired
    ProductMapper productMapper;
    @RequestMapping(value = "/v1/admin/products", method = RequestMethod.GET)
    public GeneralResult login(Page page) {
        System.out.println("获取到的页码是："+page.getPageNum());
//因为后面使用的sql是limit a,b语句，所以把pagenum要转换一下，limit a,b表示取从a+1开始，取b个数
        page.setPageNum((page.getPageNum()-1)*page.getPageSize());
        ArrayList<Product> arrayList = productMapper.getProductByPage(page);
        GeneralResult result=new GeneralResult();
        result.setContent(arrayList);
        return result;
    }
}

ProductMapper.java

package com.example.demo.dao;

import com.example.demo.entity.Page;
import com.example.demo.entity.Product;
import org.springframework.stereotype.Repository;

import java.util.ArrayList;

@Repository
public interface ProductMapper {

    ArrayList<Product>  getProductByPage(Page page);
}

Page.java

package com.example.demo.entity;

import lombok.Data;


@Data
public class Page {
    Integer pageNum;
    Integer pageSize;
}

ProductMapper.xml

<select id="getProductByPage"  resultMap="BaseResultMap" parameterType="com.example.demo.entity.Page">
    select
    <include refid="Base_Column_List" />
    from product
    limit #{pageNum},#{pageSize}
  </select>

postman

二、前端实现方法

前端框架antd

<Table rowKey="id" pagination={{total:dataSource.length,defaultPageSize:10}} columns={columns} bordered dataSource={dataSource}></Table>

pagination为页面的配置参数

total:总数据条数

defaultPageSize:默认每页数据量

分页 Pagination - Ant Design