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.
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.
<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> 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
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!
Pourquoi vue.js signale-t-il une erreur ?
Quelles sont les utilisations des slots vue.js ?
Comment sauter avec des paramètres dans vue.js
Utilisation d'indexof en Java
impossible d'ouvrir la page Web
fenêtre.invite
Introduction aux touches de raccourci de capture d'écran dans Win11
Plateforme de trading en masse
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
