spring boot + Vue.js实现表格分页
前台页面
编号
用户名
年龄
状态
{{user.id}}
{{user.name}}
{{user.age}}
default
后台java代码：
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired //注入，xml方式
private UserMapper userMapper;
@RequestMapping("/vue")
@ResponseBody
PageVue getuserbyid(Integer cpage) {
System.out.println("cpage= "+cpage);
//cpage当前页号
if (cpage==null) {
cpage=1;
}
int pageSize=5; //页面显示行数，自行设置
int navigatePages=6;//滑动窗口中格子个数，自行设置
int total=userMapper.getTotal();
int startrow=(cpage-1)*pageSize;
List rows=userMapper.selectusersPage(startrow, pageSize);
List columns=userMapper.getUserColumn();
PageVue page =new PageVue(total, pageSize, navigatePages, cpage, rows,columns);
return page;
}
@RequestMapping("/insert")
@ResponseBody
String insert(User user) {
int num=userMapper.insert(user);
if(num > 0){
return "OK";
}else{
return "FAIL";
}
}
}
分页类，具体实现思路见这篇博客https://blog.csdn.net/lillllllll/article/details/102636208
package com.demo.dao;
import java.util.List;
import java.util.Map;
public class PageVue {
private int totalRows; //总行数
private int current; //当前页
private int totalPages; //总页数
private int pageSize; // 每页行数
private List tableColumns;
public List getTableColumns() {
return tableColumns;
}
public void setTableColumns(List tableColumns) {
this.tableColumns = tableColumns;
}
private List rows; // 结果集，储存一个页面的数据记录
private int[] navigatepageNums; //所有导航页号
private int navigatePages; //导航页码数，即滑动窗口个数
//导航条上的第一页
private int navigateFirstPage;
//导航条上的最后一页
private int navigateLastPage;
//是否为第一页
private boolean isFirstPage = false;
//是否为最后一页
private boolean isLastPage = false;
//构造函数
public PageVue(int totalRows,int pageSize,int navigatePages, int current, List rows,List tableColumns) {
//设置5个属性
this.totalRows=totalRows;
this.pageSize=pageSize;
this. navigatePages=navigatePages;
this.current=current;
this.rows=rows;
this.tableColumns=tableColumns;
//设置8个属性
this.calcProperties();
}
//计算滑动窗口中的页号，不止一种生成策略，这里采用
//http://git.oschina.net/free/Mybatis_PageHelper提供的方案来实现
private int[] calcNavigatepageNums() {
//当总页数小于或等于导航页码数时
if (totalPages <= navigatePages) {
navigatepageNums = new int[totalPages];
for (int i = 0; i < totalPages; i++) {
navigatepageNums[i] = i + 1;
}
} else { //当总页数大于导航页码数时
navigatepageNums = new int[navigatePages];
int startNum = current - navigatePages / 2;
int endNum = current + navigatePages / 2;
if (startNum < 1) {
startNum = 1;
//(最前navigatePages页
for (int i = 0; i < navigatePages; i++) {
navigatepageNums[i] = startNum++;
}
} else if (endNum > totalPages) {
endNum = totalPages;
//最后navigatePages页
for (int i = navigatePages - 1; i >= 0; i--) {
navigatepageNums[i] = endNum--;
}
} else {
//所有中间页
for (int i = 0; i < navigatePages; i++) {
navigatepageNums[i] = startNum++;
}
}
}
return navigatepageNums;
}
//设置8个属性
private void calcProperties() {
this.totalPages=(int) Math.ceil((double)totalRows/pageSize);
this.isFirstPage = current == 1;
this.isLastPage = current == totalPages || totalPages == 0;
// this.hasPreviousPage = current > 1;
// this.hasNextPage = current < totalPages;
this.navigatepageNums=calcNavigatepageNums();
//计算滑动窗口第一格的页号、最后一格页号
if (navigatepageNums != null && navigatepageNums.length > 0) {
this.navigateFirstPage = navigatepageNums[0];
this.navigateLastPage = navigatepageNums[navigatepageNums.length - 1];
}
}
//getters setters
................
}
UserMapper接口，用MyBatis访问数据库
package com.demo.dao;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import org.springframework.stereotype.Repository;
import com.entity.User;
@Mapper
public interface UserMapper {
List queryAllUser();
List findnameandage(String name, int age);
List findnameandageMap(Map map);
List selectusersPage(int startrow,int num);
int getTotal();
@Select("select * from user where id=#{id}")
User getUserById(Integer id);
@Update("update user set name=#{name}, age=#{age} where id=#{id}")
int update(User user);
@Delete("delete from user where id=#{id}")
int delete(int id);
@Insert("insert into user (name,age) value(#{name},#{age})")
int insert(User user);
@Select("select COLUMN_NAME from information_schema.COLUMNS where TABLE_SCHEMA = (select database()) and table_name = 'user'")
List getUserColumn();
}
package com.entity;
public class User {
private Integer id;
private String name;
private int age;
//getters,setters
//......
}
运行效果如下：
添加记录效果：
