Comment implémenter une véritable pagination dans Vue.js

Cet article partage principalement avec vous un article sur la façon d'implémenter une véritable pagination dans Vue.js. Il a une bonne valeur de référence et j'espère qu'il sera utile. à tout le monde. Suivons l’éditeur et jetons un coup d’œil.

Idée :

Pendant le processus d'initialisation, le front-end demande d'abord le nombre total d'éléments, puis demande le troisième Une page de données, puis utilisez ajax (axios et qs) pour obtenir les données de l'arrière-plan en fonction du numéro de page demandé en fonction de l'événement de changement de page de clic.

Processus :

Élément de configuration du numéro de page :

<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>

ServiceImpl :

<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 Requêtes totales

code 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>

Code backend (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 Demander la page d'accueil et les numéros de page suivants

vue.js (JavaScript) code :

<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>

Changement de page :

<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>

Code backend (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>

Supplémentaire :

Vous pouvez ajouter une configuration : pageSize, la passer du recto vers l'arrière-plan, modifier la taille de la pagination

Exemple, requête de condition, peut être configuré dans Params, utilisez l'exemple de configuration mybatis pour interroger

Résumé :

Ceci est une vraie méthode de pagination relativement native, si vous souhaitez implémenter une pagination plus complexe, vous devez utiliser les plug-ins de pagination associés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!