This article mainly shares with you an article on how to implement true paging in Vue.js. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor and take a look.
During the initialization process, the front-end first requests the total number of items, and then requests the third One page of data, and then use ajax (axios and qs) to get the data from the background according to the requested page number based on the click page turning event.
<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><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><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:{'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}<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><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><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:{'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}<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><span style="font-family: 微软雅黑, "Microsoft YaHei";">this.$axios.post('http://localhost:8088/Web/ListServlet',<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:{'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'}<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><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> can be added with configuration: PageSize, transmitted from the front desk to the background, modify the paging size
EXAMPLE, condition query, you can configure it in Params, use it, use it, use it, use it, use it, use it, use mybatis example configuration query
This is a relatively native true paging method. If you want to implement more complex paging, you need Use relevant pagination plugins.
The above is the detailed content of How to implement true paging in Vue.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
