Spring Boot项目（七）：vue.js表格分页，ajax异步获取数据

最新推荐文章于 2024-08-15 16:09:21 发布

不能留白

最新推荐文章于 2024-08-15 16:09:21 发布

阅读量485

点赞数

分类专栏： Spring Boot 文章标签： Spring Boot 表格分页 vue ajax

本文链接：https://blog.csdn.net/qq_36958158/article/details/102714833

版权

本文总结了在Spring Boot项目中使用Vue.js进行表格分页和Ajax异步获取数据的经验。前端通过传递当前页和每页数据大小给后端，后端进行SQL分页查询并返回数据。文章包含Vue.js代码示例和UserController.java的分页处理部分，最后展示了实现效果。

摘要由CSDN通过智能技术生成

踩了很多坑，总结了很多经验才决定写下来，不容易，请各位点点赞，评评论，谢谢。

前言：springboot的配置，看我之前的博客，vue.js是script引入的，分页采用的是sql分页（后端分页）。

分页实现思路：前端获取当前页和每页的数据大小两个值传到后台查询当前页的数据，返回数据数组给前端加载表格数据。

一、简单的表格代码（样式自己弄，代码我就不贴了）

<body>
	<div id="td">
		<br><br>
		<table id="tb">
			<thead>
				<tr>
					<th><input type="checkbox" @click="selectAll()" :checked="isAllSelected"></th>
					<th>序号</th>
					<th>账号</th>
					<th>密码</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(person,index) in currentPageData" :key="index">
					<td><input type="checkbox" @click="selectOne(person.id)" :checked="saveId.indexOf(person.id)>-1" value="person.id"></td>
					<td>{
  {(currentPage-1)*pageSize+index+1}}</td>
					<td>{
  {person.username}}</td>
					<td>{
  {person.password}}</td>
					<td><input value="删除" type="submit" @click="deleteUser(person.id)"></td>
				</tr>
			</tbody>
		</table>
		<br><br>
		<footer>
			<input value="首页" type="submit" @click="firstPage()">
			<input value="上一页" type="submit" @click="prevPage()">
			<span>{
  {current