uni-pagination实现表格分页查询

API帮助文档

        在uniapp中通过uni-pagination组件实现表格内容的分页查询，实现思路和简单，分为两个步骤：

1、使用MySQL的Limit语句按照要求查询出符合分页要求的记录；

2、通过MySQL的COUNT函数获取该表中的全部记录；

接下来我们结合前两个章节的内容实现表格的分页查询。

一、分页查询微服务
        在idea中使用通用Mapper实现单表的分页查询，用户访问controller时需要传递2个参数，分别是从第page条记录开始查，每次查询pageSize条数据，controller按照要求从数据库中查询相关的记录并返回，同时返回该表中的全部记录。以下是相关代码：

mapper.xm
 

<select id="selectByLimt" parameterType="int" resultMap="BaseResultMap">
    select * from user order by id desc limit #{page},#{pageSize}
  </select>

controller

@Autowired(required = false)
    private UserMapper userMapper;
 
    /**
     * 测试查询
     * @return
     */
    @GetMapping("/t1")
    @ResponseBody
    @CrossOrigin(origins = "*")//允许跨源请求
    public HttpResult getuser(int pageIndex,int pageSize){
        List<User> users = userMapper.selectByLimt((pageIndex-1)*pageSize,pageSize);
        int rows = userMapper.selectCount(null);//查询总条数
        return new HttpResult(200,null,users,rows);
    }

二、分页查询uniapp

在uniapp中使用uni-table，在表格下方添加uni-pagination分页器

<!-- 分页器-->
		<uni-table
		current="1"
		pageSize="6"
		total="10"
		/>

分页器需要3个参数，分别是：

data() {
			return {
				userList:null,
				pageIndex: 1,  //分页器页码
				pageSize: 6,  //分页器每页显示数据的条数
				pageTotal: 0  //分页器数据总条数
			}
		}

运行后页面效果如下：

 点击分页器的监听函数

// 分页器点击监听
pageChanged(e){
				console.log(e.current); //打印出当前点击的页码
				this.pageIndex = e.current; //给变量赋值
				this.requestUser();
			}

网络请求函数：

/* 请求用户列表*/
			requestUser(){
				/*uni-app的API发送http请求，默认get*/
				uni.request({
				    url: 'http://localhost:8082/user/t1', //仅为示例，并非真实接口地址。
				    data: {
						pageIndex: this.pageIndex,
						pageSize: this.pageSize
					},
					success: (res) => {
				        console.log(res.data);
						this.userList = res.data.data;
						this.pageTotal = res.data.total
				    }
				});
			}

最终效果：

 三、完整代码

1.HttpResult

@Data
@AllArgsConstructor
public class HttpResult {
    private int code; //200代表成功，500代表失败
    private String msg;//请求失败的提示信息
    private Object data; //请求成功后响应的结果
    private int total; //列表总条数
}

2.UserMapper

public interface UserMapper extends Mapper<User> {
    public int modify(User user);
    public List<User> selectByLimt(int page,int pageSize);
}

3.UserMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jf.demo5.dao.user.UserMapper">
  <resultMap id="BaseResultMap" type="com.jf.demo5.entity.user.User">
    <!--
      WARNING - @mbg.generated
    -->
    <result column="id" jdbcType="BIGINT" property="id" />
    <result column="name" jdbcType="VARCHAR" property="name" />
    <result column="age" jdbcType="INTEGER" property="age" />
    <result column="email" jdbcType="VARCHAR" property="email" />
  </resultMap>
 
<update id="modify" parameterType="com.jf.demo5.entity.user.User">
  update user set name=#{name} where id=#{id}
</update>
 
  <select id="selectByLimt" parameterType="int" resultMap="BaseResultMap">
    select * from user order by id desc limit #{page},#{pageSize}
  </select>
</mapper>

4.UserController

@RestController
@RequestMapping("/user")
public class UserController {
 
    @Autowired(required = false)
    private UserMapper userMapper;
 
    /**
     * 测试查询
     * @return
     */
    @GetMapping("/t1")
    @ResponseBody
    @CrossOrigin(origins = "*")//允许跨源请求
    public HttpResult getuser(int pageIndex,int pageSize){
        List<User> users = userMapper.selectByLimt((pageIndex-1)*pageSize,pageSize);
        int rows = userMapper.selectCount(null);//查询总条数
        return new HttpResult(200,null,users,rows);
    }
}