SSM整合篇】五. SSM整合+layui分页 基于【SSM整合篇】四
【SSM整合篇】五. SSM整合+layui分页 基于【SSM整合篇】四
github源码(day57-cascade) https://github.com/1196557363/ideaMavenProject
项目准备
- 本项目基于 【SSM整合篇】四
SSM整合篇】四. SSM整合 级联查询 基于【SSM整合篇】三 https://blog.csdn.net/TheNew_One/article/details/103904387
- 下载layui包 https://www.layui.com/
- 参考demo https://www.layui.com/demo
- 原项目不变
1. 分页
1.1 定义Page分页对象
package com.wpj.bean;
import java.util.*;
/**
* ClassName: Page
* Description:
*
* @author JieKaMi
* @version 1.0
* @date: 2020\1\9 0009 19:14
* @since JDK 1.8
*/
public class Page<T> {
private Integer pageSize = 3; //每页显示
private Integer currentPage = 1; // 当前页
private Integer totalCount; // 总数
private Integer totalPage; // 总页数
private List<T> list; // 存放查出来的数据
public Page() { }
public Page(Integer pageSize, Integer currentPage, Integer totalCount, Integer totalPage, List<T> list) {
this.pageSize = pageSize;
this.currentPage = currentPage;
this.totalCount = totalCount;
this.totalPage = totalPage;
this.list = list;
}
public Integer getPageSize() { return pageSize; }
public void setPageSize(Integer pageSize) { this.pageSize = pageSize; }
public Integer getCurrentPage() { return currentPage; }
public void setCurrentPage(Integer currentPage) { this.currentPage = currentPage; }
public Integer getTotalCount() { return totalCount; }
public void setTotalCount(Integer totalCount) { this.totalCount = totalCount; }
public Integer getTotalPage() { return totalPage; }
public void setTotalPage(Integer totalPage) { this.totalPage = totalPage; }
public List<T> getList() { return list; }
public void setList(List<T> list) { this.list = list; }
@Override
public String toString() {
return "Page{" +
"pageSize=" + pageSize +
", currentPage=" + currentPage +
", totalCount=" + totalCount +
", totalPage=" + totalPage +
", list=" + list +
'}';
}
}
1.2 写dao，mapper，service及其impl
1.2.1 service (没错这次先写service和impl)
package com.wpj.service;
import com.wpj.bean.*;
import org.apache.ibatis.annotations.*;
import java.util.*;
/**
* ClassName: IEmpService
* Description:
*
* @author JieKaMi
* @version 1.0
* @date: 2020\1\8 0008 19:47
* @since JDK 1.8
*/
public interface IEmpService {
...
/**
* 分页显示Emp
* @return
*/
void getPageEmp(Page<Emp> page);
}
12.2 serviceImpl
package com.wpj.service.impl;
import com.wpj.bean.*;
import com.wpj.dao.*;
import com.wpj.service.*;
import org.springframework.beans.factory.annotation.*;
import org.springframework.stereotype.*;
import java.util.*;
/**
* ClassName: EmpServiceImpl
* Description:
*
* @author JieKaMi
* @version 1.0
* @date: 2020\1\8 0008 20:03
* @since JDK 1.8
*/
@Service
public class EmpServiceImpl implements IEmpService {
@Autowired
private IEmpDao iEmpDao;
...
public void getPageEmp(Page<Emp> page) {
Integer pageSize = page.getPageSize();
Integer currentPage = page.getCurrentPage();
Integer totalCount = iEmpDao.getEmpCount();
Integer totalPage = 0;
if(totalCount % pageSize == 0) {
totalPage = totalCount / pageSize;
} else {
totalPage = totalCount / pageSize + 1;
}
page.setTotalCount(totalCount);
page.setTotalPage(totalPage);
Integer index = (currentPage - 1) * pageSize;
page.setList(iEmpDao.getPageEmp(index, pageSize));
}
}
1.2.3 根据serviceImpl定义的方法开始生成方法
package com.wpj.dao;
import com.wpj.bean.*;
import org.apache.ibatis.annotations.*;
import java.util.*;
/**
* ClassName: IEmpDao
* Description:
*
* @author JieKaMi
* @version 1.0
* @date: 2020\1\8 0008 19:11
* @since JDK 1.8
*/
public interface IEmpDao {
...
/**
* 分页显示Emp
* @return
*/
List<Emp> getPageEmp(@Param("index") Integer index, @Param("pageSize") Integer pageSize);
/**
* 查询Emp总数
* @return
*/
Integer getEmpCount();
}
1.2.4 dao对应xml
<mapper namespace="com.wpj.dao.IEmpDao">
<resultMap id="empMap" type="emp">
<id property="empId" column="emp_id"/>
<result property="empName" column="emp_name" />
<result property="job" column="job" />
<result property="superId" column="super_id" />
<result property="deptNo" column="dept_no" />
<association property="superEmp" javaType="emp">
<result property="empName" column="superName" />
association>
<association property="dept" javaType="dept">
<result property="deptName" column="deptName" />
association>
resultMap>
...
<select id="getEmpCount" resultType="java.lang.Integer">
select count(1) from emp
select>
<select id="getPageEmp" resultMap="empMap">
SELECT
e1.*, e2.emp_name AS superName,
d.dept_name AS deptName
FROM
emp e1
LEFT JOIN emp e2 ON (e1.super_id = e2.emp_id)
LEFT JOIN dept d ON (e1.dept_no = d.dept_id)
LIMIT #{index} ,#{pageSize}
select>
mapper>
1.3 TestPage
不着急写controller
package com.wpj.service.impl;
import com.wpj.bean.*;
import com.wpj.service.*;
import org.junit.*;
import org.junit.runner.*;
import org.springframework.beans.factory.annotation.*;
import org.springframework.test.context.*;
import org.springframework.test.context.junit4.*;
/**
* ClassName: TestPage
* Description:
*
* @author JieKaMi
* @version 1.0
* @date: 2020\1\9 0009 19:31
* @since JDK 1.8
*/
@RunWith(SpringJUnit4ClassRunner.class)
@ContextConfiguration(value="classpath:spring-context.xml")
public class TestPage {
@Autowired
private IEmpService iEmpService;
@Test
public void testGetEmpPage(){
Page<Emp> page = new Page<Emp>();
iEmpService.getPageEmp(page);
System.out.println(page);
}
}
1.3.1 结果
1.3 写controller
package com.wpj.web.controller;
import com.wpj.bean.*;
import com.wpj.service.*;
import org.springframework.beans.factory.annotation.*;
import org.springframework.stereotype.*;
import org.springframework.ui.*;
import org.springframework.validation.annotation.*;
import org.springframework.web.bind.annotation.*;
import java.util.*;
/**
* ClassName: Controller
* Description:
*
* @author JieKaMi
* @version 1.0
* @date: 2020\1\8 0008 21:55
* @since JDK 1.8
*/
@Controller
@RequestMapping("/emp")
public class EmpController {
@Autowired
private IEmpService iEmpService;
...
@RequestMapping("/getEmpPage")
public String getEmpPage(ModelMap map,Page<Emp> page){
iEmpService.getPageEmp(page);
map.put("page",page);
return "empPage";
}
}
1.4 新建empPage.html和分页模板Page.html
1.4.1 Page.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<base th:href="${#request.getContextPath()+'/'}">
head>
<body>
<div th:fragment="pageDivShow">
<div id="pageDiv">div>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js">script>
<script th:inline="javascript">
var count = [[${page.totalCount}]];
var currentPage = [[${page.currentPage}]];
var limit = [[${page.pageSize}]];
script>
<script>
// 初始化分页导航条
layui.use('laypage', function(){
// laypage代表的前端分页对象
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'pageDiv' // 存放分页导航条的容器id
,count: count // 条数
,layout: [ 'prev', 'page', 'next', 'limit','count'] // 局部
,limit: limit // 每页显示的条数
,curr:currentPage // 当前页
,limits:[3,9,12,15]
,jump: function(obj, first){
console.info(obj); // obj就点分页对象
//首次不执行
if(!first){
//do something
// 查询下一页的数据
location.href ="emp/getEmpPage?currentPage="+obj.curr+"&pageSize="+obj.limit;
}
}
});
});
script>
div>
body>
html>
1.4.2 empPage.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<base th:href="${#request.getContextPath()+'/'}">
head>
<table class="layui-table">
<tr>
<td>idtd>
<td>nametd>
<td>jobtd>
<td>superIdtd>
<td>superNametd>
<td>deptNotd>
<td>deptNametd>
<td>operationtd>
tr>
<tr th:each="emp:${page.list}">
<td th:text="${emp.empId}" />
<td th:text="${emp.empName}" />
<td th:text="${emp.job}" />
<td th:text="${emp.superId}" />
<td th:text="${emp.superEmp !=null?emp.superEmp.empName:''}" />
<td th:text="${emp.deptNo}" />
<td th:text="${emp.dept.deptName}" />
<td>
<a href="#">编辑a>
<a href="#">删除a>
td>
tr>
table>
<div th:include="page::pageDivShow">div>
body>
html>
1.5 访问
http://localhost:8080/emp/getEmpPage
1.6 结果
