SSM——（5）分页查看员工信息

最新推荐文章于 2023-08-16 19:56:18 发布

星_陨

最新推荐文章于 2023-08-16 19:56:18 发布

阅读量401

点赞数

分类专栏： SSM整合文章标签： SSM 分页

本文链接：https://blog.csdn.net/shaohe18362202126/article/details/87869366

版权

SSM整合专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、集成分页插件PageHelper

1、添加Maven依赖

2、配置mybatis-config.xml中分页插件拦截器

一、集成分页插件PageHelper

1、添加Maven依赖

<!-- Mybatis-PageHelper分页插件 -->
<dependency>
	<groupId>com.github.pagehelper</groupId>
	<artifactId>pagehelper</artifactId>
	<version>5.1.6</version>
</dependency>

2、配置mybatis-config.xml中分页插件拦截器

<plugins>
	<!--分页插件拦截器 -->
	<plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
</plugins>

3、创建分页参数对象PageParam

package com.starfall.ssm.model;

import java.io.Serializable;

/**
 * @name: 分页参数对象
 * @description: 包括页码、数据大小、排序、导航页码 等
 * @author: StarFall
 * @data: 2019年2月15日下午10:11:10
 */
public class PageParam implements Serializable {

	private static final long serialVersionUID = 1L;

	private int pageNum = 1;

	private int pageSize = 10;

	private String orderBy;

	// 导航页码 【1,2,3,4,5】
	private int navigatePages = 5;

	public PageParam() {
	}

	public PageParam(int pageNum) {
		this.pageNum = pageNum;
	}

	public PageParam(int pageNum, int pageSize) {
		this.pageNum = pageNum;
		this.pageSize = pageSize;
	}

	public PageParam(int pageNum, int pageSize, int navigatePages) {
		super();
		this.pageNum = pageNum;
		this.pageSize = pageSize;
		this.navigatePages = navigatePages;
	}

	//getter、setter
}

二、后台代码中实现分页查询

1、controller层：

@RequestMapping("/get_emps_page")
public Map<String, Object> getEmpsByPage(PageParam pageParam) {
	PageInfo<Employee> pageInfo = employeeService.getEmpsByPage(pageParam);
	return ApiResult.SUCCESS.getMap().add("data", pageInfo);
}

2、service层：

public PageInfo<Employee> getEmpsByPage(PageParam pageParam) {
	PageHelper.startPage(pageParam);
	List<Employee> list = employeeMapper.selectByExample(null);
	PageInfo<Employee> page = new PageInfo<Employee>(list, pageParam.getNavigatePages());
	return page;
}

三、前端实现分页

1、emps.html代码：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link href="../resources/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../resources/css/emps.css">
    <script src="../resources/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../resources/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../resources/js/util/dateUtil.js" type="text/javascript"></script>
    <script src="../resources/js/commConfig.js" type="text/javascript"></script>
</head>

<body>
    <!-- 首页导航 -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="">Project name</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 主体 -->
    <div class="container-fluid">
        <div class="container">
            <!-- 导航 -->
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <ul class="nav navbar-nav">
                            <li class="active"><a id="page_emp" class="navbar-brand" href="#">PAGE EMP</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class=""><a id="all_emp" class="navbar-brand" href="#">ALL EMP</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="jumbotron" id="page_emp_jumbotron">
                <table class="table table-striped" id="page_emps_table">
                    <caption><h3>分页员工信息</h3>
                    </caption>
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                            <th>phone</th>
                            <th>HireDate</th>
                            <th>Salary</th>
                            <th>job</th>
                            <th>Department</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <!-- 分页条 -->
                <nav aria-label="Page navigation">
                    <ul class="pagination" id="page_nav_ul">
                    </ul>
                </nav>
                <nav aria-label="Page navigation" id="page_nav_info">
                </nav>
            </div>
            <div class="jumbotron" id="all_emp_jumbotron">
                <table class="table table-striped" id="all_emps_table">
                    <caption><h3>所有员工信息</h3>
                    </caption>
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email</th>
                            <th>phone</th>
                            <th>HireDate</th>
                            <th>Salary</th>
                            <th>job</th>
                            <th>Department</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">

getEmpPage(1, GBasePageSize);

/**
 * 点击查看全部emp
 */
$("#all_emp").click(function(event) {
    $("#page_emp_jumbotron").hide();
    $("#all_emp_jumbotron").show();
    $("#all_emp").parent().addClass('active');
    $("#page_emp").parent().removeClass('active');

    getAllEmp();
});

/**
 * 点击分页查看emp
 */
$("#page_emp").click(function(event) {
    $("#all_emp_jumbotron").hide();
    $("#page_emp_jumbotron").show();
    $("#page_emp").parent().addClass('active');
    $("#all_emp").parent().removeClass('active');
    getEmpPage(1, GBasePageSize);
});

/**
 * 分页获取员工信息
 * @param  {[type]} pageNum  [页码]
 * @param  {[type]} pageSize [大小]
 * @return {[type]}          [description]
 */
function getEmpPage(pageNum, pageSize) {
    $("#all_emp_jumbotron").hide();
    $("#page_emp_jumbotron").show();
    $("#page_emp").parent().addClass('active');
    $("#all_emp").parent().removeClass('active');
    $.ajax({
            url: '/emps/get_emps_page',
            type: 'GET',
            data: { 'pageNum': pageNum, 'pageSize': pageSize },
            success: function(response) {
                var emps = response.data.list;
                loadTableData("#page_emps_table tbody", emps);
                loadPageNav(response.data);
                loadPageInfo(response.data);
            }
        })
        .fail(function() {
            //console.log("error");
        })

}

/**
 * 获取所有的emp信息
 * @return {[type]} [description]
 */
function getAllEmp() {
    $("#page_emp_jumbotron").hide();
    $("#all_emp_jumbotron").show();
    $("#all_emp").parent().addClass('active');
    $("#page_emp").parent().removeClass('active');
    $.ajax({
            url: '/emps/get_all_emps',
            type: 'GET',
            success: function(response) {
            	var emps=response.list;
                loadTableData("#all_emps_table tbody", emps);
            }
        })
        .fail(function() {
            //alert("error");
        })
}

/**
 * table加载数据
 * @param  {[type]} itemId [table的id]
 * @param  {[type]} data   [emp数据]
 */
function loadTableData(itemId, data) {
    $(itemId).empty();
    $.each(data, function(index, item) {
        var empId = $("<th></th>").append(item.employeeId);
        var firstName = $("<td></td>").append(item.firstName);
        var lastName = $("<td></td>").append(item.lastName);
        var email = $("<td></td>").append(item.email);
        var phone = $("<td></td>").append(item.phoneNumber);
        var hireDate = $("<td></td>").append(longtimeToDate(item.hireDate));
        var salary = $("<td></td>").append(item.salary);
        var job = $("<td></td>").append(item.jobId);
        var department = $("<td></td>").append(item.departmentId);

        $("<tr></tr>").append(empId)
            .append(firstName)
            .append(lastName)
            .append(email)
            .append(phone)
            .append(hireDate)
            .append(salary).append(job).append(department)
            .appendTo(itemId);
    });
}

/**
 * 加载分页条
 * @param  {[type]} data [分页条数据]
 * @return {[type]}      [description]
 */
function loadPageNav(data) {
    $("#page_nav_ul").empty();
    //首页
    var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
    //前一页
    var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));

    if (!data.hasPreviousPage) {
        prePageLi.addClass("disabled");
        firstPageLi.addClass("disabled");
    } else {
        prePageLi.click(function() {
            getEmpPage(data.pageNum - 1, GBasePageSize);
        });
        firstPageLi.click(function() {
            getEmpPage(1, GBasePageSize);
        });

    }
    $("#page_nav_ul").append(firstPageLi).append(prePageLi);
    $.each(data.navigatepageNums, function(index, item) {
        var li = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
        li.click(function() {
            getEmpPage(item, GBasePageSize);
        });
        $("#page_nav_ul").append(li);
    });
    //尾页
    var lastPageLi = $("<li></li>").append($("<a></a>").append("尾页").attr("href","#"));
    //下一页
    var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));

    if (!data.hasNextPage) {
        nextPageLi.addClass("disabled");
        lastPageLi.addClass("disabled");
    } else {
        nextPageLi.click(function() {
            getEmpPage(data.pageNum + 1, GBasePageSize);
        });
        lastPageLi.click(function() {
            getEmpPage(data.pages, GBasePageSize);
        });
    }
    $("#page_nav_ul").append(nextPageLi).append(lastPageLi);

}

/**
 * 加载分页信息
 * @param  {[type]} data [description]
 * @return {[type]}      [description]
 */
function loadPageInfo(data) {
    $("#page_nav_info").empty();
    $("#page_nav_info").append("当前" + data.pageNum + "页,总" +
        data.pages + "页,总" +
        data.total + "条记录");
}
</script>

</html>

2、效果：

星_陨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SSM——（5）分页查看员工信息

目录一、集成分页插件PageHelper1、添加Maven依赖2、配置mybatis-config.xml中分页插件拦截器3、创建分页参数对象PageParam二、后台代码中实现分页查询1、controller层：2、service层：三、前端实现分页1、emps.html代码：2、效果：一、集成分页插件PageHelper1、添加Maven依赖...
复制链接

扫一扫

专栏目录