mybatis-pagehelper-ajax-log分页插件实现日志分页显示

最新推荐文章于 2025-06-20 16:10:16 发布

原创最新推荐文章于 2025-06-20 16:10:16 发布 · 392 阅读

1 ·

CC 4.0 BY-SA版权

Java 学习笔记后期整理专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用PageHelper分页插件在不同框架（包括SSM和无SpringMVC的SM）中实现日志信息的分页显示。通过具体步骤和代码示例，展示了如何配置PageHelper，实现日志数据的分页查询和前端展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用分页插件(pagehelper)显示日志

整理于2020年02月17日

使用有道云笔记md的第三天

开发工具:eclipse

sm-pagehelper-ajax-log(noSpringMVC)
ssm-pagehelper-ajax-log

使用分页插件(`pagehelper`)显示日志

sm(`noSpringMVC`)

1. `spring`+`mybatis`+`pagehelper`+`ajax`(no`SpringMVC`) 分页显示日志信息（传参(无法排序)、调用静态方法(startPage()) 两种的方式）

1. 数据准备、导入`jar`、`web.xml`、`spring`配置文件(`applicationContext.xml`)

数据准备：登录注册项目的操作日志表log

CREATE TABLE `log` (
 `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '编号',
 `pageinfo` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '用户操作信息',
 `ip` int(10) unsigned DEFAULT NULL COMMENT 'ip信息',
 `time` datetime DEFAULT NULL COMMENT '操作时间',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=150 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

导入jar包:
jar01 jar02

项目结构
sm项目结构
web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0">
  <display-name>webzyspring-mybatis-pagehelper-log-ajax</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <!-- 上下文参数 -->
  <context-param>
  	<param-name>contextConfigLocation</param-name>
  	<param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  <listener>
  	<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
</web-app>

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:jdbc="http://www.springframework.org/schema/jdbc"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xsi:schemaLocation="http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
	<!-- 开启-扫描组件 扫描注解 -->
	<context:component-scan base-package="com.zy.service.impl"></context:component-scan>
	<!-- 加载属性文件 -->
	<context:property-placeholder location="classpath:db.properties"/>
	<!-- dataSource -->
	<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="${jdbc.driver}"></property>
		<property name="url" value="${jdbc.url}"></property>
		<property name="username" value="${jdbc.username}"></property>
		<property name="password" value="${jdbc.password}"></property>
	</bean>
	<!-- sqlSessionFactory -->
	<bean id="factory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource"></property>
		<property name="typeAliasesPackage" value="com.zy.pojo"></property>
		<!-- pagehelper拦截器插件配置 -->
		<property name="plugins">
	    	<array>
				<bean class="com.github.pagehelper.PageInterceptor">
					<property name="properties">
						<!--使用下面的方式配置参数，一行配置一个 -->
						<value>
							helperDialect=mysql
					 		reasonable=true
					 		supportMethodsArguments=true
						</value>
					</property>
				</bean>
			</array>
		</property>
	</bean>
	<!-- 扫描mapper -->
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<property name="basePackage" value="com.zy.mapper"></property>
		<property name="sqlSessionFactoryBeanName" value="factory"></property>
	</bean>
	<!-- 事务管理器 -->
	<bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name="dataSource" ref="dataSource"></property>
	</bean>
	<!-- 声明式事务 -->
	<tx:advice id="txAdvice" transaction-manager="txManager">
		<tx:attributes>
			<tx:method name="ins*"/>
			<tx:method name="del*"/>
			<tx:method name="upd*"/>
			<tx:method name="*" read-only="true"/>
		</tx:attributes>
	</tx:advice>
	<!-- 配置AOP -->
	<aop:config>
		<aop:pointcut expression="execution(* com.zy.service.impl.*.*(..))" id="mypoint"/>
		<aop:advisor advice-ref="txAdvice" pointcut-ref="mypoint"/>
	</aop:config>
	<!-- 使用cjlib动态代理 -->
	<aop:aspectj-autoproxy proxy-target-class="true"></aop:aspectj-autoproxy>
</beans>

db.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/dbtest?useSSL=false
jdbc.username=root
jdbc.password=root

log4j.properties

log4j.rootCategory=INFO, CONSOLE
#log4j.rootCategory=INFO, CONSOLE ,LOGFILE

log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=%C %d{YYYY-MM-dd hh:mm:ss}  %m %n

#log4j.appender.LOGFILE=org.apache.log4j.FileAppender
#log4j.appender.LOGFILE.File=D:/my.log
#log4j.appender.LOGFILE.Append=true
#log4j.appender.LOGFILE.layout=org.apache.log4j.PatternLayout
#log4j.appender.LOGFILE.layout.ConversionPattern=%m %n

2.pojo

Log.java

package com.zy.pojo;

public class Log {
	int id;
	String pageInfo;
	String ip;
	String time;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getPageInfo() {
		return pageInfo;
	}
	public void setPageInfo(String pageInfo) {
		this.pageInfo = pageInfo;
	}
	public String getIp() {
		return ip;
	}
	public void setIp(String ip) {
		this.ip = ip;
	}
	public String getTime() {
		return time;
	}
	public void setTime(String time) {
		this.time = time;
	}
	@Override
	public String toString() {
		return "Log [id=" + id + ", pageInfo=" + pageInfo + ", ip=" + ip + ", time=" + time + "]";
	}
}

3.持久层mapper

LogMapper.java

package com.zy.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import com.zy.pojo.Log;
public interface LogMapper {
	/**
	 * 使用调用静态方法的方式
	 * @return
	 */
	@Select("select * from log")
	List<Log> selByPageStatic();
	/**
	 * 使用传参的方式
	 * @param pageNum
	 * @param pageSize
	 * @return
	 */
	@Select("select * from log")
	List<Log> selByPage(
			@Param("pageNum") int pageNum,
			@Param("pageSize") int pageSize);
}

4.业务层service

LogService.java

package com.zy.service;
import com.github.pagehelper.PageInfo;
import com.zy.pojo.Log;
public interface LogService {
	/**
	 * 通过调用静态方法的方式
	 * @return
	 */
	PageInfo<Log> showLog();
	/**
	 * 通过传参的方式
	 * @param pageNumStr
	 * @param pageSizeStr
	 * @return
	 */
	PageInfo<Log> showLog(int pageNum ,int pageSize );
}

LogServiceImpl.java

package com.zy.service.impl;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import com.github.pagehelper.PageInfo;
import com.zy.mapper.LogMapper;
import com.zy.pojo.Log;
import com.zy.service.LogService;

@Service
public class LogServiceImpl implements LogService{
	@Resource
	private LogMapper mapper;
	@Override
	public PageInfo<Log> showLog() {
		PageInfo<Log> pi = new PageInfo<Log>(mapper.selByPageStatic());
		return pi;
	}
	@Override
	public PageInfo<Log> showLog(int pageNum, int pageSize) {
		PageInfo<Log> pi = new PageInfo<Log>(mapper.selByPage(pageNum, pageSize));
		return pi;
	}
}

5.控制器servlet

ShowLogServlet.java

package com.zy.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.zy.pojo.Log;
import com.zy.service.LogService;
import com.zy.service.impl.LogServiceImpl;

@WebServlet("/showLog")
public class ShowLogServlet extends HttpServlet{
	private LogService logService;
	@Override
	public void init() throws ServletException {
		WebApplicationContext wac = WebApplicationContextUtils.getWebApplicationContext(getServletContext());
		logService = wac.getBean("logServiceImpl",LogServiceImpl.class);
	}
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		String pageNumStr = req.getParameter("pageNum");
		String pageSizeStr = req.getParameter("pageSize");
		String sortType = req.getParameter("sortType");
		int pageNum = 1;
		if (pageNumStr != null && !pageNumStr.equals("")) {
			pageNum = Integer.parseInt(pageNumStr.trim());
		}
		int pageSize = 10;
		if (pageSizeStr != null && !pageSizeStr.equals("")) {
			pageSize = Integer.parseInt(pageSizeStr.trim());
		}
		PageInfo<Log> pi ;
		if(sortType!=null && !sortType.trim().equals("") && //排序参数合法
				(sortType.trim().equals("asc") ||sortType.trim().equals("desc")) ) {
			PageHelper.startPage(pageNum,pageSize,"id "+sortType.trim());
			pi = logService.showLog();
		}else {
//			PageHelper.startPage(pageNum,pageSize);
//			pi = logService.showLog();
			//如果没有排序参数的话，就使用传参的方式
			pi = logService.showLog(pageNum, pageSize);
		}
		//获取到排序方式或者判断prePage与nextPage的大小就知道是按什么排序了
		//String orderBy = ((Page)pi.getList()).getOrderBy();
		//使用Ajax    设置响应内容
		resp.setContentType("application/json;charset=utf-8");
		PrintWriter out = resp.getWriter();
		//对象转json
		ObjectMapper mapper = new ObjectMapper();
		out.println(mapper.writeValueAsString(pi));
		out.flush();
		out.close();
	}
}

6.视图层jsp

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
 <head>
  <base href="<%=basePath%>">
  <meta charset="UTF-8">
  <title>日志显示</title>
   <style>
table.hovertable {
	font-size: 13px;
	color: #333;
	border-width: 1px;
	border-color: #999;
	border-collapse: collapse;
	width: auto;
	margin: 0 auto;
}

table.hovertable th {
	background-color: #c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}

table.hovertable tr {
	background-color: #d4e3e5;
}

table.hovertable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
	text-align: center;
}

button {
	border: 1px solid transparent;
	color: #457eff;
	background-color: #fff;
	border-color: #457eff;
	border-radius:10px;
}

button:hover {
	border: 1px solid transparent;
	border-color: #ffae00;
	color: rgb(255, 0, 157);
}

/* 分页显示 - 切换当前页 的css  记得带上 a a:hover的样式 */
a {
	text-decoration: none;
	font-size: 14px;
	color: #457eff;
}

a:hover {
	text-decoration: none;
	color: rgb(255, 0, 157);
}

.page {
    /* line-height: 16px; */
    text-align: right;
    padding: 8px 0;
    /* margin-right: 1px; */
    height: 44px;
    /* border: 1px solid #e6e6e6; */
    border-top: none;
    margin: 0;
}
.dataTables_paginate {
    display: block;
    height: 30px;
    margin-bottom: 10px;
    margin-top: 15px;
    position: relative;
}
.page div {
    float: right;
}
.page .Pcurrent {
    color: #fff;
    background: #20a53a;
    cursor: default;
    border-color: #20a53a;
}
.page span, .page a {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    font-family: "Arial";
    font-size: 13px;
    color: #666;
    float: left;
    border: 1px solid #ececec;
    border-right: none;
}
.page a:hover {
    background: #e8e8e8;
    color: #20a53a;
    text-shadow: 0 1px 0 #fff;
    cursor: pointer;
}

/* 设置每页显示的条数 */
.Pcount-item {
    border-right: 1px solid #ececec;
}
input, textarea, select {
    font-size: 100%;
    font-family: inherit;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}
</style>
  <script type="text/javascript" src="<%=path %>/js/jquery-3.4.1.js"></script>
  <script type="text/javascript">
$(function() {
	//当前页
	var pageNum = 1;
	//当前页的数量
	var pageSize = 10;
	
	//当前页的数量
	var size = 0;
	//总数据条数
	var total = 0;
	//总页数
	var pages = 0;
	//导航页码数(默认为8)
	var navigatePages = 0;
	//导航页码(默认有8个)
	var navigatepageNums = new Array();
	//前一页
	var prePage =1;
	//下一页
	var nextPage = 1;
	
	//select数组(下拉框)
	var select = ["10","50","100","200","500","1000","2000"];
	//排序方式
	var sortType = "desc";
	
	//默认调用一次，加载数据
	getMyData();
	
	//首页
	$("#navigate").on("click",".Pstart",function(){
		pageNum = 1;
		getMyData();
		return false;
	});
	//尾页
	$("#navigate").on("click",".Pend",function(){
		pageNum = pages;
		getMyData();
		return false;
	});
	//上一页
	$("#navigate").on("click",".Ppren",function() {
		pageNum = prePage;
		getMyData();
		return false;
	});
	//下一页
	$("#navigate").on("click",".Pnext",function() {
		pageNum = nextPage;
		getMyData();
		return false;
	});
	//跳转到指定页
	$("#navigate").on("click",".Pnum",function(){
		pageNum = $(this).html();
		getMyData();
		return false;
	});
	//下拉框事件
	$("#navigate").on("change","#pcount-item",function(){
		//如果当前页大于或等于改变后的页就显示第一页
		if(pageNum >= (total/$(this).val()+1)){
			pageNum = 1; 
		}
		pageSize = $(this).val();
		getMyData(); 
		return false; 
	});
	//正序排序事件
	$("#asc").on("click",function(){
		sortType = "asc";
		pageNum = 1;
		getMyData();
		return false;
	});
	//倒序排序事件
	$("#desc").on("click",function(){
		sortType = "desc";
		pageNum = 1;
		getMyData();
		return false;
	});
	
	function getMyData(){
		//$.post(url,参数,success回调方法,dataType)
		$.post("showLog",{"pageSize":pageSize,"pageNum":pageNum,"sortType":sortType},function(data){
			pages = data.pages;
			prePage = data.prePage;
			nextPage = data.nextPage;
			pageNum = data.pageNum;
			pageSize = data.pageSize;
			total = data.total;
			
			// 日志表格
			var result = "";
			for (var i = 0; i < data.list.length; i++) {
				result+="<tr >";
				result+="<td>"+data.list[i].id+"</td>";
				result+="<td>"+data.list[i].time+"</td>";
				result+="<td>"+data.list[i].ip+"</td>";
				result+="<td colspan='2'>"+data.list[i].pageInfo+"</td>";
				result+="</tr>";
			}
			$("#mytbody").html(result);
			
			//导航栏
			var navigate = "";
			if(!data.isFirstPage){
				navigate += "<a class='Pstart' href=''>首页</a><a class='Ppren' href=''>上一页</a>";
			}
			for (var i = 0; i < data.navigatepageNums.length; i++) {
				if(data.navigatepageNums[i]==data.pageNum){
					navigate += "<span class='Pcurrent'>"+data.navigatepageNums[i]+"</span>";
				}else{
					navigate += "<a class='Pnum' href=''>"+data.navigatepageNums[i]+"</a>";
				}
			}
			if(!data.isLastPage){
				navigate += "<a class='Pnext' href=''>下一页</a><a class='Pend' href=''>尾页</a>";
			}
			navigate += "<span class='Pcount'>共"+data.pages+"页"+data.total+"条数据</span>";
			
			//下拉框
			navigate += "<span class='Pcount-item'>每页<select id='pcount-item' style='margin-left: 3px;margin-right: 3px;border:#ddd 1px solid' class='showRow'>";
			for(var i = 0; i< select.length; i++){
				//如果当前下拉框的值是当前页码，那么就选中该值
				if(select[i]==pageSize){
					navigate += "<option value='"+select[i]+"' selected=''>"+select[i]+"</option>";
				}else{
					navigate += "<option value='"+select[i]+"'>"+select[i]+"</option>";
				}
			}
			navigate += "</select>条	</span>";
			$("#navigate").html(navigate);
		})
	}
});
  </script>
 </head>
 <body>
 <h3 align="center">使用mybatis-pagehelper插件分页</h3>
 <hr>
 <div>
	<table class="hovertable">
	<tr>	
		<th>编号</th>
		<th>时间</th>
		<th>IP</th>
		<th>操作	</th>
		<th>
			<button type="button" style="">
				<a href="" id="asc" >⏫</a>
			</button>
			<button type="button" style="">
				<a href="" id="desc" >⏬</a>
			</button>
			<button type="button">
				<a href="<%=path%>/">返回主页</a>
			</button>
		</th>
	</tr>
	<tbody id="mytbody"></tbody>
	</table>
  </div>
  <br>
  <!-- 导航页码 -->
  <div class="dataTables_paginate paging_bootstrap page logsBody" style="margin-bottom:0">
  	<div id="navigate">
  	</div>
  </div>
 </body>
</html>

ssm

2. `ssm`+`pagehelper`+`ajax`分页显示日志信息

1. 数据准备、导入`jar`、`web.xml`、`spring`配置文件(`applicationContext.xml`)

数据准备：登录注册项目的操作日志表log

CREATE TABLE `log` (
 `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '编号',
 `pageinfo` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '用户操作信息',
 `ip` int(10) unsigned DEFAULT NULL COMMENT 'ip信息',
 `time` datetime DEFAULT NULL COMMENT '操作时间',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=150 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

导入jar包:
jar01 jar02

项目结构
ssm项目结构
web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0">
  <display-name>webzyspring-mybatis-pagehelper-log-ajax</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <!-- 上下文参数 -->
  <context-param>
  	<param-name>contextConfigLocation</param-name>
  	<param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  <listener>
  	<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!-- 前端控制器 -->
  <servlet>
  	<servlet-name>springmvc</servlet-name>
  	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  	<init-param>
  		<param-name>contextConfigLocation</param-name>
  		<param-value>classpath:springmvc.xml</param-value>
  	</init-param>
  	<load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
  	<servlet-name>springmvc</servlet-name>
  	<url-pattern>/</url-pattern>
  </servlet-mapping>
  <!-- 字符编码拦截器 -->
  <filter>
  	<filter-name>encoding</filter-name>
  	<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  	<init-param>
  		<param-name>encoding</param-name>
  		<param-value>utf-8</param-value>
  	</init-param>
  </filter>
  <filter-mapping>
  	<filter-name>encoding</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:jdbc="http://www.springframework.org/schema/jdbc"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xsi:schemaLocation="http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
		http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
	<!-- 开启-扫描组件 扫描注解(service) -->
	<context:component-scan base-package="com.zy.service.impl"></context:component-scan>
	<!-- 加载属性文件 -->
	<context:property-placeholder location="classpath:db.properties"/>
	<!-- dataSource -->
	<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
		<property name="driverClassName" value="${jdbc.driver}"></property>
		<property name="url" value="${jdbc.url}"></property>
		<property name="username" value="${jdbc.username}"></property>
		<property name="password" value="${jdbc.password}"></property>
	</bean>
	<!-- sqlSessionFactory -->
	<bean id="factory" class="org.mybatis.spring.SqlSessionFactoryBean">
		<property name="dataSource" ref="dataSource"></property>
		<property name="typeAliasesPackage" value="com.zy.pojo"></property>
		<!-- pagehelper拦截器插件配置 -->
		<property name="plugins">
	    	<array>
				<bean class="com.github.pagehelper.PageInterceptor">
					<property name="properties">
						<!--使用下面的方式配置参数，一行配置一个 -->
						<value>
							helperDialect=mysql
					 		reasonable=true
					 		supportMethodsArguments=true
						</value>
					</property>
				</bean>
			</array>
		</property>
	</bean>
	<!-- 扫描mapper -->
	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
		<property name="basePackage" value="com.zy.mapper"></property>
		<property name="sqlSessionFactoryBeanName" value="factory"></property>
	</bean>
	<!-- 事务管理器 -->
	<bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
		<property name="dataSource" ref="dataSource"></property>
	</bean>
	<!-- 声明式事务 -->
	<tx:advice id="txAdvice" transaction-manager="txManager">
		<tx:attributes>
			<tx:method name="ins*"/>
			<tx:method name="del*"/>
			<tx:method name="upd*"/>
			<tx:method name="*" read-only="true"/>
		</tx:attributes>
	</tx:advice>
	<!-- 配置AOP -->
	<aop:config>
		<aop:pointcut expression="execution(* com.zy.service.impl.*.*(..))" id="mypoint"/>
		<aop:advisor advice-ref="txAdvice" pointcut-ref="mypoint"/>
	</aop:config>
	<!-- 使用cjlib动态代理 -->
	<aop:aspectj-autoproxy proxy-target-class="true"></aop:aspectj-autoproxy>
</beans>

springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
	<!-- 开启扫描注解(mapper) -->
	<context:component-scan base-package="com.zy.controller"></context:component-scan>
	<!-- 注解驱动 -->
	<mvc:annotation-driven></mvc:annotation-driven>
	<!-- 静态资源 -->
	<mvc:resources location="/js/" mapping="/js/**"></mvc:resources>
	<mvc:resources location="/css/" mapping="/css/**"></mvc:resources>
	<mvc:resources location="/img/" mapping="/img/**"></mvc:resources>
</beans>

db.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/dbtest?useSSL=false
jdbc.username=root
jdbc.password=root

log4j.properties

log4j.rootCategory=INFO, CONSOLE
#log4j.rootCategory=INFO, CONSOLE ,LOGFILE

log4j.appender.CONSOLE=org.apache.log4j.ConsoleAppender
log4j.appender.CONSOLE.layout=org.apache.log4j.PatternLayout
log4j.appender.CONSOLE.layout.ConversionPattern=%C %d{YYYY-MM-dd hh:mm:ss}  %m %n

#log4j.appender.LOGFILE=org.apache.log4j.FileAppender
#log4j.appender.LOGFILE.File=D:/my.log
#log4j.appender.LOGFILE.Append=true
#log4j.appender.LOGFILE.layout=org.apache.log4j.PatternLayout
#log4j.appender.LOGFILE.layout.ConversionPattern=%m %n

2.pojo

Log.java

3.持久层mapper(同上)

LogMapper.java

4.业务层service(同上)

LogService.java

LogServiceImpl.java

5.控制器controller(同上)

ShowLogServlet.java

package com.zy.controller;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.zy.pojo.Log;
import com.zy.service.LogService;

@Controller
public class ShowLogController {

	@Resource
	private LogService logServiceImpl;
	
	@RequestMapping("/showLog")
	@ResponseBody
	public PageInfo<Log> showByPage(String pageNum,String pageSize,String sortType) {
		//初始化分页参数
		int pageNumInt = 1;
		if (pageNum != null && !pageNum.equals("")) {
			pageNumInt = Integer.parseInt(pageNum.trim());
		}
		int pageSizeInt = 10;
		if (pageSize != null && !pageSize.equals("")) {
			pageSizeInt = Integer.parseInt(pageSize.trim());
		}
		PageInfo<Log> pi ;
		if(sortType!=null && !sortType.trim().equals("") && //排序参数是否合法
				(sortType.trim().equals("asc") ||sortType.trim().equals("desc")) ) {
			PageHelper.startPage(pageNumInt,pageSizeInt,"id "+sortType.trim());
			pi = logServiceImpl.showLog();
		}else {
//			PageHelper.startPage(pageNum,pageSize);
//			pi = logService.showLog();
			//如果没有排序参数的话，就使用传参的方式
			pi = logServiceImpl.showLog(pageNumInt, pageSizeInt);
		}
		//获取到排序方式
		//String orderBy = ((Page)pi.getList()).getOrderBy();
		return pi;
	}
}

6.视图层jsp

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"
    
    %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
 <head>
  <base href="<%=basePath%>">
  <meta charset="UTF-8">
  <title>日志显示</title>
   <style>
table.hovertable {
	font-size: 13px;
	color: #333;
	border-width: 1px;
	border-color: #999;
	border-collapse: collapse;
	width: auto;
	margin: 0 auto;
}

table.hovertable th {
	background-color: #c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}

table.hovertable tr {
	background-color: #d4e3e5;
}

table.hovertable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
	text-align: center;
}

button {
	border: 1px solid transparent;
	color: #457eff;
	background-color: #fff;
	border-color: #457eff;
	border-radius:10px;
}

button:hover {
	border: 1px solid transparent;
	border-color: #ffae00;
	color: rgb(255, 0, 157);
}



/* 分页显示 - 切换当前页 的css  记得带上 a a:hover的样式 */
a {
	text-decoration: none;
	font-size: 14px;
	color: #457eff;
}

a:hover {
	text-decoration: none;
	color: rgb(255, 0, 157);
}

.page {
    /* line-height: 16px; */
    text-align: right;
    padding: 8px 0;
    /* margin-right: 1px; */
    height: 44px;
    /* border: 1px solid #e6e6e6; */
    border-top: none;
    margin: 0;
}
.dataTables_paginate {
    display: block;
    height: 30px;
    margin-bottom: 10px;
    margin-top: 15px;
    position: relative;
}
.page div {
    float: right;
}
.page .Pcurrent {
    color: #fff;
    background: #20a53a;
    cursor: default;
    border-color: #20a53a;
}
.page span, .page a {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    font-family: "Arial";
    font-size: 13px;
    color: #666;
    float: left;
    border: 1px solid #ececec;
    border-right: none;
}
.page a:hover {
    background: #e8e8e8;
    color: #20a53a;
    text-shadow: 0 1px 0 #fff;
    cursor: pointer;
}

/* 设置每页显示的条数 */
.Pcount-item {
    border-right: 1px solid #ececec;
}
input, textarea, select {
    font-size: 100%;
    font-family: inherit;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}
</style>
  <script type="text/javascript" src="<%=path %>/js/jquery-3.4.1.js"></script>
  <script type="text/javascript">
$(function() {
	//当前页
	var pageNum = 1;
	//当前页的数量
	var pageSize = 10;
	
	//当前页的数量
	var size = 0;
	//总数据条数
	var total = 0;
	//总页数
	var pages = 0;
	//导航页码数(默认为8)
	var navigatePages = 0;
	//导航页码(默认有8个)
	var navigatepageNums = new Array();
	//前一页
	var prePage =1;
	//下一页
	var nextPage = 1;
	
	//select数组(下拉框)
	var select = ["10","50","100","200","500","1000","2000"];
	//排序方式
	var sortType = "desc";
	
	
	//默认调用一次，加载数据
	getMyData();
	
	//首页
	$("#navigate").on("click",".Pstart",function(){
		pageNum = 1;
		getMyData();
		return false;
	});
	//尾页
	$("#navigate").on("click",".Pend",function(){
		pageNum = pages;
		getMyData();
		return false;
	});
	//上一页
	$("#navigate").on("click",".Ppren",function() {
		pageNum = prePage;
		getMyData();
		return false;
	});
	//下一页
	$("#navigate").on("click",".Pnext",function() {
		pageNum = nextPage;
		getMyData();
		return false;
	});
	//跳转到指定页
	$("#navigate").on("click",".Pnum",function(){
		pageNum = $(this).html();
		getMyData();
		return false;
	});
	//下拉框事件
	$("#navigate").on("change","#pcount-item",function(){
		//如果当前页大于或等于改变后的页就显示第一页
		if(pageNum >= (total/$(this).val()+1)){
			pageNum = 1; 
		}
		pageSize = $(this).val();
		getMyData(); 
		return false; 
	});
	//正序排序事件
	$("#asc").on("click",function(){
		sortType = "asc";
		pageNum = 1;
		getMyData();
		return false;
	});
	//倒序排序事件
	$("#desc").on("click",function(){
		sortType = "desc";
		pageNum = 1;
		getMyData();
		return false;
	});
	
	function getMyData(){
		//$.post(url,参数,success回调方法,dataType)
		$.post("showLog",{"pageSize":pageSize,"pageNum":pageNum,"sortType":sortType},function(data){
			pages = data.pages;
			prePage = data.prePage;
			nextPage = data.nextPage;
			pageNum = data.pageNum;
			pageSize = data.pageSize;
			total = data.total;
			
			// 日志表格
			var result = "";
			for (var i = 0; i < data.list.length; i++) {
				result+="<tr >";
				result+="<td>"+data.list[i].id+"</td>";
				result+="<td>"+data.list[i].time+"</td>";
				result+="<td>"+data.list[i].ip+"</td>";
				result+="<td colspan='2'>"+data.list[i].pageInfo+"</td>";
				result+="</tr>";
			}
			$("#mytbody").html(result);
			
			//导航栏
			var navigate = "";
			if(!data.isFirstPage){
				navigate += "<a class='Pstart' href=''>首页</a><a class='Ppren' href=''>上一页</a>";
			}
			for (var i = 0; i < data.navigatepageNums.length; i++) {
				if(data.navigatepageNums[i]==data.pageNum){
					navigate += "<span class='Pcurrent'>"+data.navigatepageNums[i]+"</span>";
				}else{
					navigate += "<a class='Pnum' href=''>"+data.navigatepageNums[i]+"</a>";
				}
			}
			if(!data.isLastPage){
				navigate += "<a class='Pnext' href=''>下一页</a><a class='Pend' href=''>尾页</a>";
			}
			navigate += "<span class='Pcount'>共"+data.pages+"页"+data.total+"条数据</span>";
			
			//下拉框
			navigate += "<span class='Pcount-item'>每页<select id='pcount-item' style='margin-left: 3px;margin-right: 3px;border:#ddd 1px solid' class='showRow'>";
			for(var i = 0; i< select.length; i++){
				//如果当前下拉框的值是当前页码，那么就选中该值
				if(select[i]==pageSize){
					navigate += "<option value='"+select[i]+"' selected=''>"+select[i]+"</option>";
				}else{
					navigate += "<option value='"+select[i]+"'>"+select[i]+"</option>";
				}
			}
			navigate += "</select>条	</span>";
			$("#navigate").html(navigate);
		})
	}
});
  </script>
 </head>
 <body>
 <h3 align="center">使用ssm-pagehelper插件分页-ajax</h3>
 <hr>
 <div>
	<table class="hovertable">
	<tr>	
		<th>编号</th>
		<th>时间</th>
		<th>IP</th>
		<th>操作	</th>
		<th>
			<button type="button" style="">
				<a href="" id="asc" >⏫</a>
			</button>
			<button type="button" style="">
				<a href="" id="desc" >⏬</a>
			</button>
			<button type="button">
				<a href="<%=path%>/">返回主页</a>
			</button>
		</th>
	</tr>
	<tbody id="mytbody"></tbody>
	</table>
  </div>
  <br>
  <!-- 导航页码 -->
  <div class="dataTables_paginate paging_bootstrap page logsBody" style="margin-bottom:0">
  	<div id="navigate">
  	</div>
  </div>
 </body>
</html>