【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

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<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

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#request.getContextPath()+'/'}">
</head>
<body>
<!-- 初始化分页导航条 -->
<div th:fragment="pageDivShow">
    <!-- 这个div用来显示分页导航条的-->
    <div id="pageDiv"></div>
    <!-- 添加样式和js的文件-->
    <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

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="${#request.getContextPath()+'/'}">
</head>
<table class="layui-table">
    <tr>
        <td>id</td>
        <td>name</td>
        <td>job</td>
        <td>superId</td>
        <td>superName</td>
        <td>deptNo</td>
        <td>deptName</td>
        <td>operation</td>
    </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 结果

在这里插入图片描述

有点基础才能看懂的代码。。。。

建议从【SSM整合篇】三开始看。

杰KaMi

发布了42 篇原创文章 · 获赞 8 · 访问量 2435

私信关注

SSM整合篇】五. SSM整合+layui分页 基于【SSM整合篇】四

【SSM整合篇】五. SSM整合+layui分页 基于【SSM整合篇】四

项目准备

1. 分页

1.1 定义Page分页对象

1.2 写dao，mapper，service及其impl

1.2.1 service (没错这次先写service和impl)

12.2 serviceImpl

1.2.3 根据serviceImpl定义的方法开始生成方法

1.2.4 dao对应xml

1.3 TestPage

1.3.1 结果

1.3 写controller

1.4 新建empPage.html和分页模板Page.html

1.4.1 Page.html

1.4.2 empPage.html

1.5 访问

1.6 结果

有点基础才能看懂的代码。。。。

建议从【SSM整合篇】三 开始看。

猜你喜欢

SSM整合篇】五. SSM整合+layui分页基于【SSM整合篇】四

【SSM整合篇】五. SSM整合+layui分页基于【SSM整合篇】四

建议从【SSM整合篇】三开始看。