Vue.js如何实现真分页

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue.js如何实现真分页，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5319字，纯文字阅读大概需要8分钟。

内容图文

本文主要为大家分享一篇Vue.js如何实现真分页的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧。

思路：

前端在初始化过程中，第一步先请求总的条数，然后，再请求第一页数据，然后根据点击翻页事件根据请求页码用ajax（axios和qs）去后台取得数据。

过程：

页码配置项：

pagerData:{
                    data:[],
                    page:{
                    	//分页数
                        arrPageSize:[10,20,30,40],
                        //分页大小
                        pageSize:10,
                        //总分页数
                        pageCount:1,
                        //当前页面
                        pageCurrent:1,
                        //总数
                        totalCount:80
                    }
                },

服务Impl：

	@Override
	public List<A> getPageList(int startpage, int endpage) throws IOException {
		// TODO Auto-generated method stub
		init();
		List<A> list = aMapper.selectByPage(startpage,endpage,null);
		return list;
	}

	@Override
	public Integer getCount() throws IOException {
		// TODO Auto-generated method stub
		init();
		Integer count = (int) aMapper.countByExample(null);
		return count;
	}

1请求总数

vue.js（JavaScript）代码：

created(){
			//请求总页数
			this.$axios.post("http://localhost:8088/Web/ListServlet",
					{params:{
						init:true
					}}
				,
				{
					headers:{'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
				}
				)
			.then(res=>{
				console.log(JSON.stringify(res.data));
				var object = eval(res.data);
				var totalNum = object["count"];
				console.log("totalNum:" + totalNum);
				this.pagerData.page.totalCount = totalNum;
			});}

后台代码（Java）：

String queryString = readRequest(request);
		
		JSONObject object = null;
		object = JSONObject.fromObject(queryString);
		JSONObject params = (JSONObject) object.get("params");
		//判断是是初始化过程
		if((params.getString("init")).equals("true")) {
			Integer count = service.getCount();
			PrintWriter out = response.getWriter();
			JSONObject result = new JSONObject();
			result.put("count", count);
			logger.info(result.toString());
			out.write(result.toString());
			out.close();
			return;
		}
		logger.info(params.get("startpage"));
		logger.info(params.get("endpage"));
		//判断不是初始化过程
		if((params.getString("init")).equals("false")) {
			PrintWriter out = response.getWriter();
			List<A> list = service.getPageList(Integer.parseInt((params.getString("startpage"))),
					Integer.parseInt((params.getString("endpage"))));
			JSONArray array = JSONArray.fromObject(list);
			out.write(array.toString());
			out.close();
			return;
		}
public String readRequest(HttpServletRequest request) throws IOException {
		BufferedReader reader = new BufferedReader(new InputStreamReader(request.getInputStream(),"UTF-8"));
		String temp = "";
		String s = "";
		while((temp = reader.readLine()) != null)
		{
			s = s + temp;
		}
		return s;
	}

2请求首页和后续页码

vue.js（JavaScript）代码：

//请求首页 1-10
			this.$axios.post("http://localhost:8088/Web/ListServlet",
				
					{params:{
						init:false,
						startpage:1,
						endpage:10
					}}
				,
				{
					headers:{'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}
				}
				)
			.then(res=>{
				console.log(JSON.stringify(res.data));
				var object = eval(res.data);
				var totalNum = object["count"];
				console.log("totalNum:" + totalNum);
				for(var i = 0; i < res.data.length; i++){
					//console.log("res.data[i] is " + i + "\n " + JSON.stringify(res.data[i]));
					var object = eval(res.data[i]);
					object.index = i+1;
					totalNum ++;
					if(i<=10){	//初始化获取数据的过程中，将前10个默认加入分页data
						this.pagerData.data.push(object);
						}
					}
				//this.pagerData.page.totalCount = totalNum;
			});
			this.loading = false;
			
			
		}

翻页（change）：

this.$axios.post('http://localhost:8088/Web/ListServlet',
            		{params:{
            			init:false,
				startpage:((curpage-1)*this.pagerData.page.pageSize +1),
				endpage:curpage*this.pagerData.page.pageSize
            		}},
            		{
            			headers:{'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}
            		}
            	).then(res=>{
					console.log(JSON.stringify(res.data));
					var object = eval(res.data);
					for(var i = 0; i < res.data.length; i++){
						//console.log("res.data[i] is " + i + "\n " + JSON.stringify(res.data[i]));
						var object = eval(res.data[i]);
						object.index = (curpage-1)*this.pagerData.page.pageSize +1 + i;
						if(i<=this.pagerData.page.pageSize){
							this.pagerData.data.push(object);
							}
						}
					//this.pagerData.page.totalCount = totalNum;
				})

后台代码（Java）：

//判断不是初始化过程
		if((params.getString("init")).equals("false")) {
			PrintWriter out = response.getWriter();
			List<A> list = service.getPageList(Integer.parseInt((params.getString("startpage"))),
					Integer.parseInt((params.getString("endpage"))));
			JSONArray array = JSONArray.fromObject(list);
			//logger.info(array.get(1).toString());
			out.write(array.toString());
			out.close();
			return;
		}

额外：

可添加配置：pageSize，从前台传入后台，修改分页大小

example，条件查询，可在params里配置，用mybatis example配置查询

总结：

这是一个比较原生的真分页方法，如果想要实现更加复杂的分页，需要使用相关分页插件。

以上就是Vue.js如何实现真分页的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的Vue.js如何实现真分页全部内容，希望文章能够帮你解决Vue.js如何实现真分页所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---