vue前端显示页码，java后端分页

最新推荐文章于 2024-12-04 16:59:56 发布
最新推荐文章于 2024-12-04 16:59:56 发布
阅读量483 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端学习 javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/BeLoved_Code/article/details/103895027

文章目录

初始版本

实现了显示所有页码，点击相应页码拿到相应页码的数据
实质上是后端分页，前端只是显示页码、联调
不足：页码太多，也会逐个显示，不能跳转页码，没有选择中当前页码
在这里插入图片描述

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title> Vue-PagerTest</title>
		<link rel="stylesheet" type="text/css" href="/CA/bootstrap/css/bootstrap.min.css"/>
	</head>
	<body>
	<div id="vueApp">
		<div class="row">
			<table align="center">
					<tr>
						<th>标题</th>
						<th>卖点</th>
					</tr>
					<tr v-for="item in items">
						<td>{{item.title}}</td>
						<td>{{item.sellpoint}}</td>
					</tr>
			</table>
		</div>
		<div id="pagenation" class="row justify-content-center">
        <div class="col-auto" style="text-align: center;">
            <ul class="pagination ">
                <li class="page-item">
                    <a href="javascript:void(0);" @click="switchToPage(1)" class="page-link">首页</a>
                </li>
                <li v-for="i in pages">
                    <a href="#" @click="switchToPage(i)" class="page-link">{{i}}</a>
                </li>
                <li class="page-item ">
                    <a href="javascript:void(0);" @click="switchToPage(pages)" class="page-link">尾页</a>
                </li>
            </ul>
        </div>
        <!--<div class="col-auto  mb-3">
            <div class="input-group" style="width: 150px">
                <input type="text" class="form-control" :placeholder="jumpPageNumPlaceholder" v-model.number="jumpPageNum">
                <div class="input-group-append">
                    <button @click="jumpPageClick" @blur="jumpPageBlur" class="input-group-text">跳转</button>
                </div>
            </div>
        </div>-->
    </div>
	</div>
		<script src="/CA/jquery/vue.js"></script>
		<script>
			var vueApp = new Vue({
				el: "#vueApp",
				data: {
					items: [],//存储后台传过来的数据
					page: 1,//当前页
					pages: 0,//总页数
				},
				created() {
					fetch('http://localhost:8080/CA/item').then(response => response.json()).then(json => {
						this.items=json.rows;
						this.page=json.page;
						this.pages=json.pages;
					})
				},
				methods: {
					switchToPage: function(p) {
						console.log(p);
						if(p < 0 || p > this.pages) {
							return false;
						}
						fetch('http://localhost:8080/CA/item?page='+p).then(response => response.json()).then(json => {
							this.items=json.rows;
							this.page=json.page;
							this.pages=json.pages;
						})
					}
				}
			});
		</script>
	</body>
</html>

methods里互调方法，即第二个方法里调用第一个方法，要通过this.第一个方法
在这里插入图片描述

升级版本

在这里插入图片描述

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title> Vue-PagerTest</title>
		<link rel="stylesheet" type="text/css" href="/CA/bootstrap/css/bootstrap.min.css" />
	</head>
	<body>
		<div id="vueApp">
			<div class="row">
				<table align="center">
					<tr>
						<th>标题</th>
						<th>卖点</th>
					</tr>
					<tr v-for="item in items">
						<td>{{item.title}}</td>
						<td>{{item.sellpoint}}</td>
					</tr>
				</table>
			</div>
			<div style="text-align: center;">
				<ul class="pagination">
	                <li class="page-item">
	                    <a href="javascript:void(0);" @click="switchToPage(1)" class="page-link">首页</a>
	                </li>
	                <li class="page-item">
	                    <a href="javascript:void(0);" @click="switchToPage(page-1)" class="page-link">上一页</a>
	                </li>
	                <li v-for="i in pages" :class="{active:i==page}">
	                    <a href="#" @click="switchToPage(i)" class="page-link">{{i}}</a>
	                </li>
	                <li class="page-item">
	                    <a href="javascript:void(0);" @click="switchToPage(page+1)" class="page-link">下一页</a>
	                </li>
	                <li class="page-item ">
	                    <a href="javascript:void(0);" @click="switchToPage(pages)" class="page-link">尾页</a>
	                </li>
	                <span class="form-inline">
						<input type="text"class="form-control" :placeholder="jumpPageNumPlaceholder" v-model.number="num" style="width: 100px;">
		            	<span @click="jumpPageClick" @blur="jumpPageBlur" class="btn btn-default">跳转</span>
					</span>
            	</ul>    
			</div>
		</div>
		<script src="/CA/jquery/vue.js"></script>
		<script>
			var vueApp = new Vue({
				el: "#vueApp",
				data: {
					items: [], //存储后台传过来的数据
					page: 1, //当前页
					pages: 0, //总页数
					num: '',
					jumpPageNumPlaceholder: ''
				},
				created() {
					fetch('http://localhost:8080/CA/item').then(response => response.json()).then(json => {
						this.items = json.rows;
						this.page = json.page;
						this.pages = json.pages;
					})
				},
				methods: {
					switchToPage: function(p) {
						console.log(p);
						if(p < 0 || p > this.pages) {
							return false;
						}
						fetch('http://localhost:8080/CA/item?page=' + p).then(response => response.json()).then(json => {
							this.items = json.rows;
							this.page = json.page;
							this.pages = json.pages;
						})
					},
					jumpPageBlur() {
						this.jumpPageNumPlaceholder = '跳转到...'
					},
					jumpPageClick() {
						let regex = /^[0-9]+$/;
						console.log(this.num);
						if(regex.test(this.num)) {
							let num = parseInt(this.num)
							if(this.num > 0 && this.num <= this.pages) {
								this.switchToPage(this.num);
							} else {
								this.jumpPageNumPlaceholder = '超出范围'
							}
						} else {
							this.jumpPageNumPlaceholder = '输入错误'
						}
						this.num = '';
					}
				}
			});
		</script>
	</body>
</html>

采用下面写法，当前页面不会选中，原因不明，还望指教

<!--<span class="btn btn-default" @click="switchToPage(1)">
                            首页
                        </span>
				<span class="btn btn-default" @click="switchToPage(page-1)">
                            上一页
                        </span>
                <span v-for="i in pages" :class="{active:i==page}">
                	<span @click="switchToPage(i)" class="btn btn-default">{{i}}</span>
                </span>-->
				<!--<span class="btn btn-default disabled">
                            ...
                        </span>
				<span class="btn btn-default" @click="switchToPage(pages)">
                            {{pages}}
                        </span>-->
				<!--<span class="btn btn-default" @click="switchToPage(page+1)">
                            下一页
                        </span>
				<span class="btn btn-default" @click="switchToPage(pages)">
                            尾页
                        </span>-->
VUE页码控件
07-11
非常好的用的页码控件，已经测试过了，下载下来可以直接使用
vue后端实现分页
weixin_43719616的博客
06-11 1676
之前写过一个前端分页的https://blog.youkuaiyun.com/weixin_43719616/article/details/111867286 所谓前端分页就是数据一次性从后端全拿到然后在前端分页。 但是后端分也就是在后端实现分页后再把数据直接在前端展示。 但是我的后端代码一直有问题，就是我点击按钮后没反应，数据不自动跳转。 <template> <div class="whole_con"> <el-container> &
Spring Boot+Vue 实现后端分页前端批量展示
weixin_42644340的博客
07-04 1853
Spring Boot+Vue 实现后端分页前端批量展示前言实现步骤1.PageBean工具类2.PageBeanResult类3.Controller调用4.前端批量展示 前言 在开发前端项目时，当我们需要展示的数据量过多从而无法一次性展示完的时候我们就会采用分页的方式，但是很多小白基本上都是使用element-UI或者其他方式实现前端分页，前端分页的弊端在于需要一次性将所有数据全部取出，当我们需要展示的内容基数过大时,如果一次性取出就会导致前端渲染缓慢，影响用户使用体验。而后端分页，前端批量展示的优势在
java+vue中的分页实现
我只是心态好
03-31 733
vue： <!--分页控件 start--> <Page :total="page.totalCount" :page-size="page.pageSize" :current="page.pageNum" :page-size-opts="page.pag...
Vue笔记（十六）—— Vue PageHelper（SpringBoot）实现后台分页
成长笔记
04-22 1240
前端开发请直接跳到第4歩 1.pom引入依赖： <!--导入pagehelper相关依赖--> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version&gt...
Vue3--项目总结--分页处理
m0_73590570的博客
06-06 399
getProductList 方法是对应的后端的分页方法，在这里当后端传回来数据后这里使用的是currentPage的值是++,最好使用后端传回来的数据。使用的pageHelper插件实现的分页，插件可以根据我们设置的限制动态计算出总页码，也可以直接取出来当前页，下一页的索引。例如要实现一个商品的分页查询：要求前端传回的参数,只需要当前页，和页面显示limit 这两个数据最好都设置默认值。这个例子是 根据当前页的，来设置是显示上一页还是下一页。
后端java前端vue2分页
10-29
在Java后端与Vue 2前端的配合中，分页通常是一个常见的需求，尤其是在处理大量数据展示的时候。这里是一个简单的概述： **后端Java处理分页：** 1. **数据库查询优化**：在Java Spring框架中，可以使用`Pageable`...
Pagination分页组件在前端Vue与后端ssm使用
weixin_47354101的博客
01-01 2112
我分为两部分，讲解vue与ssm中的使用，先给大家看一下分页的效果 Vue前台 一、导入Pagination相关插件信息 1、导入Pagination组件(component) <template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pagination :background="background" :current-page.sync="
SpringBoot+PageHelper+Vue+Element从零开始实现分页功能（包含前后端源码）
袁的博客
11-13 971
SpringBoot+PageHelper+Vue+Element从零开始实现分页功能（包含前后端源码），分页组件实现原来可以这么简单！！！！！！
能写一套后端前端能使用的分页吗，前端vue后端java，并以用户是一个小白的方式讲解一下
10-16
1. 创建Java后端项目：使用你喜欢的IDE或构建工具（如Maven）创建一个新的Java后端项目。 2. 编写后端代码：编写Java代码，实现分页功能。通常，后端需要处理以下请求： * 获取总记录数和总页数 * 获取当前页的...
处理后端发送的页码分页
TWenYuan的博客
06-10 209
处理后端发送过来的带有总数的分页处理显示，页码跳转，排序的问题。 @size-change：pageSize 改变时会触发（每页条数） @current-change=“search” currentPage 改变时会触发（当前页） :page-size=“size” 每页显示条目个数 :current-page=“page” 当前页数 :total=“total” 总条目数......
java获取word文件页数的3种方式
林的小站
05-11 8140
java获取word文件页数
vue html代码生成word 设置页面大小
最新发布
shelter123456的博客
12-04 451
label: '竖向',value: 1,},},label: '横向',value: 2,},],// 将 HTML 转换为 Word Blobconst converted = htmlDocx.asBlob('自己的html代码', {},});// 触发文件下载。
vue-前端分页和后端分页实现
lxs19930928的博客
12-30 6634
1：前端手写分页(数据量小的情况下) 前端需要使用slice截取： tableData((page-1) * pageSize,page * pageSize) 2：后端分页，前端只需要关注传递的page和pageSize了，这里就不一一赘述了 3：前端手写分页按钮 window.onload = function () { new Vue({ el: '#app', data: { params:{ page:1, pagesize:2
Javaweb之Vue组件库Element案例分页工具栏的详细解析
qq_69748833的博客
12-02 443
【代码】Javaweb之Vue组件库Element案例分页工具栏的详细解析。
-后端数据分页和前端显示分页结果
杨鑫的博客
01-17 7645
1、简介 在其他框架中，分页是件非常痛苦的事，Laravel的分页器集成了查询构建器和Eloquent ORM，并且开箱提供了方便的、易于使用的、基于数据库结果集的分页。分页器生成的HTML兼容Bootstrap CSS 框架。 2、基本使用 基于查询构建器进行分页 有多种方式实现分页，最简单的方式就是使用查询构建器或Eloquent模型的paginate方法。该方法基
js实现前端分页页码管理
Cruise的博客
01-18 2695
https://www.cnblogs.com/w-yong/p/6255444.html 本人已经成功实现 分页，有问题欢迎交流，现在做一些补充：一下是我的： 说明一点：当前页和总页数是 用作分页算法的， 当前页和每页多少条数据是用来条用后台查数据的，不要乱 前端页面： &lt;input hidden="hidden" id="pageSize"&gt; &lt;div ...
怎么实现列表分页功能，并且给前端返回总条数和总页数
qq_41979882的博客
09-09 7696
重点： 1、数据库:Mysql ==> MySQL用的是limit进行分页查询 代码示例: 语句1：select * from student limit 0,10 // 语句1和2均返回表student的前10行 ，语句1 ：第一个参数表示从该参数的下一条数据开始查询，第二个参数表示每次返回的数据条数。 语句2：select * from student limit 10 offset 0 //语句2 ：第二个参数表示从该参数的下一条数据开始查询，第一个参数表...
js调用ajax根据后台返回的总数前端设置每页的条数实现分页功能
猿飞梦的博客
10-17 6084
有时候前端需要实现分页功能，但是后台只给我们返回来总数，每页显示多少条数据需要我们前端来设置，貌似这个有点欺负人，哈哈哈。。话不多说直接上代码： (这里需要用到layui插件，js文件自己去官网下载哦) var pageNumber=1;//第几页 var sumCount=0; //总共多少条数 var pageSize=3; //每页显示3条 //连接终端 function connT...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值