Vue.js如何实现真分页

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

思路：

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

过程：

    页码配置项：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">pagerData:{<br/>                    data:[],<br/>                    page:{<br/>                    	//分页数<br/>                        arrPageSize:[10,20,30,40],<br/>                        //分页大小<br/>                        pageSize:10,<br/>                        //总分页数<br/>                        pageCount:1,<br/>                        //当前页面<br/>                        pageCurrent:1,<br/>                        //总数<br/>                        totalCount:80<br/>                    }<br/>                },<br/></span>

服务Impl：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">	@Override<br/>	public List<A> getPageList(int startpage, int endpage) throws IOException {<br/>		// TODO Auto-generated method stub<br/>		init();<br/>		List<A> list = aMapper.selectByPage(startpage,endpage,null);<br/>		return list;<br/>	}<br/><br/>	@Override<br/>	public Integer getCount() throws IOException {<br/>		// TODO Auto-generated method stub<br/>		init();<br/>		Integer count = (int) aMapper.countByExample(null);<br/>		return count;<br/>	}<br/></span>

1请求总数

vue.js（JavaScript）代码：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">created(){<br/>			//请求总页数<br/>			this.$axios.post("http://localhost:8088/Web/ListServlet",<br/>					{params:{<br/>						init:true<br/>					}}<br/>				,<br/>				{<br/>					headers:{&#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded;charset=utf-8&#39;}<br/>				}<br/>				)<br/>			.then(res=>{<br/>				console.log(JSON.stringify(res.data));<br/>				var object = eval(res.data);<br/>				var totalNum = object["count"];<br/>				console.log("totalNum:" + totalNum);<br/>				this.pagerData.page.totalCount = totalNum;<br/>			});}<br/></span>

后台代码（Java）：

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

2请求首页和后续页码

vue.js（JavaScript）代码：

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

翻页（change）：

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

后台代码（Java）：

<span style="font-family: 微软雅黑, "Microsoft YaHei";">//判断不是初始化过程<br/>		if((params.getString("init")).equals("false")) {<br/>			PrintWriter out = response.getWriter();<br/>			List<A> list = service.getPageList(Integer.parseInt((params.getString("startpage"))),<br/>					Integer.parseInt((params.getString("endpage"))));<br/>			JSONArray array = JSONArray.fromObject(list);<br/>			//logger.info(array.get(1).toString());<br/>			out.write(array.toString());<br/>			out.close();<br/>			return;<br/>		}<br/></span>

额外：

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

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

总结：

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

Atas ialah kandungan terperinci Vue.js如何实现真分页. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!