uniapp第二讲: uni-pagoation实现表格分页查询

API帮助文档链接：https://uniapp.dcloud.io/component/uniui/uni-pagination.html#%E4%BB%8B%E7%BB%8D

我们通过使用uniapp中的uni-pagoation组件实现分页表格查询

一、idea分页查询服务

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

mapper.xml

  <select id="selectAllByLimt" parameterType="int" resultMap="BaseResultMap">
    SELECT * FROM auth_user ORDER BY id DESC LIMIT #{pageIndex}, #{pageSize}
  </select>

service 

    /**
     * 查询用户，分页查询
     * @param pageIndex
     * @param pageSize
     * @return
     */
        public HttpResult getAll(int pageIndex,int pageSize){
            List<AuthUser> urs = authUserMapper.selectAllByLimt((pageIndex-1)*pageSize, pageSize);
           int rows=authUserMapper.selectCount(null);
            return new HttpResult(200,null,urs,rows);
        }

        public HttpResult login(AuthUser user){
            HttpResult result=null;
            List<AuthUser> urs=authUserMapper.select(user);
            if(urs!=null&&urs.size()>0){
                result=new HttpResult(200,null,"登录成功",0);
            }else {
                result=new HttpResult(500,null,"登录失败",0);
            }
            return result;
        }

controller

    @GetMapping("/login/{phone}/{password}")
    @ResponseBody
    @CrossOrigin(origins = "*")//实现跨域请求
    public HttpResult login(@PathVariable String phone, @PathVariable String password){
        AuthUser user=new AuthUser();
        user.setPhone(phone);
        user.setPasswd(password);
        return userService.login(user);
    }

         1.2、测试：网页访问controller路径：http://localhost:8070/user/list/1/10（仅供参考）

 二、在HTML中实现分页查询（uniapp操作实现）

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

<uni-pagination @change="pageChanged" :current="pageIndex" :pageSize="pageSize" :total="pageTotle"/>

 分页器一共需要三个参数，分别时是：

data(){
		return{
			userList:[],
			pageIndex:1,//分页器页码
			pageSize:10,//分页器每页显示数据的条数
			pageTotle:0//分页器数据总条数
		}
	},

点击分页器的监听函数

	//点击分页器的监听函数
		pageChanged(e){
			console.log(e.current);
			this.pageIndex=e.current;
			this.requsetUserList();
		}

网络请求函数

	//请求用户列表
		requsetUserList(){
			uni.request({
			    url: 'http://localhost:8070/user/list/'+this.pageIndex+'/'+this.pageSize, //仅为示例，并非真实接口地址。
			    success: (res) => {
			        console.log(res.data);
					this.userList=res.data.data;
					this.pageTotle=res.data.rows;
			    }
			});
		},

效果展示：