<%@page import="com.alibaba.fastjson.JSONObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/global.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/about.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/datepicker.css">
<!-- 引入公共静态文件-->
<%@ include file="/WEB-INF/template/common/commonStatic.jsp" %>
</head>
<body>
<!-- 引入公共头部-->
<%@ include file="/WEB-INF/template/common/header.jsp" %>
<!-- 分页模块 -->
<div id="pagingDv">
<%
// pages总页数 current当前页
String json = "{\"pages\":12,\"current\":1}";
JSONObject parseObject = JSONObject.parseObject(json);
request.setAttribute("result", parseObject);
%>
<div class="padding-box">
<div class="padding clearmar" data-obj='{total:${result.total},totalPage:${result.pages},size:${result.size}}' id="pagination-js">
<c:set var="previousPageActive" value="${result.current!=1?'':'active'}"/>
<span class="item ${previousPageActive} prev">上一页</span>
<%-- 开始"..."分页符 --%>
<c:set var="begin" value="${result.current-5}"/>
<c:set var="begin" value="${begin>0?(result.current-3):0}"/>
<%-- 结尾"..."分页符 --%>
<c:set var="end" value="${result.current+4}"/>
<c:set var="end" value="${end<result.pages?(result.current+2):result.pages}"/>
<c:forEach var="i" begin="1" end="${result.pages}">
<%-- 开始"..."分页符 --%>
<c:if test="${begin > 0 and i <= 3}">
<c:choose>
<c:when test="${i == 3}">
<span>...</span>
</c:when>
<c:otherwise>
<span class="item" href="#">${i}</span>
</c:otherwise>
</c:choose>
</c:if>
<c:if test="${i > begin and i <= end}">
<c:set var="currentPageActive" value="${result.current!=i?'':'active'}"/>
<span class="item ${currentPageActive}">${i}</span>
</c:if>
<%-- 结尾"..."分页符 --%>
<c:if test="${end < result.pages and i >= (result.pages-2)}">
<c:choose>
<c:when test="${i == (result.pages-2)}">
<span>...</span>
</c:when>
<c:otherwise>
<span class="item" href="#">${i}</span>
</c:otherwise>
</c:choose>
</c:if>
</c:forEach>
<c:set var="nextPageActive" value="${result.current!=result.pages?'':'active'}"/>
<span class="item ${nextPageActive} next" href="#">下一页</span>
</div>
</div>
</div>
</body>
</html>
分页效果图如下: