第02讲：uni-pagination实现表格分页查询

API帮助文档

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

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

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

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

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

mapper.xml

    select * from user order by id desc limit #{page},#{pageSize}
  

controller

@Autowired(required = false)
    private UserMapper userMapper;

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

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

分页器需要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.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 {
    public int modify(User user);
    public List selectByLimt(int page,int pageSize);
}

3.UserMapper.xml

  
    
    
    
    
    
  


  update user set name=#{name} where id=#{id}


  
    select * from user order by id desc limit #{page},#{pageSize}
  

4.UserController

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired(required = false)
    private UserMapper userMapper;

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