❤️jquery pagination 实现jsp页面分页效果
这里分享使用插件和不使用插件的方法，只有jsp和js代码不同，controller和service，dao，mapper的代码都一样（不使用插件有一点缺陷，就是页数太多的时候页面宽度显示问题）
1.引入jquery.pagination.js和pagination.css
2.1不使用插件的jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/common_taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<%@ include file="/WEB-INF/jsp/common/common_css.jsp"%>
<style>
.tree li {
list-style-type: none;
cursor:pointer;
}
table tbody tr:nth-child(odd){background:#F4F4F4;}
table tbody td:nth-child(even){color:#C00;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" advert="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 广告管理</a></div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<%@include file="/WEB-INF/jsp/common/top.jsp" %>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tree">
<jsp:include page="/WEB-INF/jsp/common/menu.jsp"></jsp:include>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
</div>
<div class="panel-body">
<form class="form-inline" advert="form" style="float:left;">
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">查询条件</div>
<input id="queryText" class="form-control has-success" type="text" placeholder="请输入查询条件">
</div>
</div>
<button id="queryBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
</form>
<button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
<button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='${CWF_PATH}/advert/toAdd.htm'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
<br>
<hr style="clear:both;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr >
<th width="30">#</th>
<th width="30"><input id="allCheckBox" type="checkbox"></th>
<th>广告描述</th>
<th>状态</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody id="tbodyConcat">
</tbody>
<tfoot>
<tr >
<td colspan="5" align="center">
<ul class="pagination">
分页的数据显示在这里
</ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<%@ include file="/WEB-INF/jsp/common/common_js.jsp"%>
<script type="text/javascript">
$(function () {
$(".list-group-item").click(function(){
if ( $(this).find("ul") ) {
$(this).toggleClass("tree-closed");
if ( $(this).hasClass("tree-closed") ) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
});
queryPageList(1);
showMenu();
});
$("tbody .btn-success").click(function(){
window.location.href = "assignadvert.html";
});
$("tbody .btn-primary").click(function(){
window.location.href = "edit.html";
});
function pageChange(pageNo){
queryPageList(pageNo);
}
var loadingIndex = -1; //分页查询
function queryPageList(pageNo){
var queryText = $("#queryText").val();
var jsonData = {"pageNo":pageNo,
"pageSize":10,
"queryText":queryText}
$.ajax({
type:"POST",
data:jsonData,
url:"${CWF_PATH}/advert/doIndex.do",
beforeSend : function(){
loadingIndex = layer.load(2,{time:10*1000});
return true;
},success:function(data){
layer.close(loadingIndex);
if(data.success){
var page = data.page;
var pageData = data.page.pageList;
var html ="";
$.each(pageData,function (i,n){
html += '<tr>';
html += ' <td>'+(i+1)+'</td>';
html += ' <td><input type="checkbox" id="'+n.id+'" name="'+n.name+'"></td>';
html += ' <td>'+n.name +'</td>';
html += ' <td>'+n.status +'</td>';
html += ' <td>';
html += ' <button type="button" class="btn btn-success btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toAssignPermission.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-check"></i></button>';
html += ' <button type="button" class="btn btn-primary btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toUpdate.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-pencil"></i></button>';
html += ' <button type="button" class="btn btn-danger btn-xs" onclick="deleteUser('+n.id+',\''+n.name+'\')"><i class=" glyphicon glyphicon-remove"></i></button>';
html += ' </td>';
html += '</tr>';
});
$("#tbodyConcat").html(html); //分页页码处理
var content ="";
if(page.pageNo == 1){
content += '<li class="disabled"><a href="#">上一页</a></li>';
}else{
content += '<li><a href="#" onclick="pageChange('+(page.pageNo-1)+')">上一页</a></li>';
}
for(var i = 1;i<=page.totalPage;i++){
content +='<li><a href="#" onclick="pageChange('+i+')">'+i+'</a></li>';
}
if(page.pageNo == page.totalPage){
content += '<li class="disabled"><a href="#">下一页</a></li>';
}else{
content += '<li><a href="#" onclick="pageChange(('+(page.pageNo+1)+'))">下一页</a></li>';
}
$(".pagination").html(content);
}else{
layer.msg(data.message, {time:1000, icon:6, shift:6});
}
},error:function(){
layer.msg("加载数据失败！", {time:1000, icon:6, shift:6});
}
});
}
$("#queryBtn").click(function (){
queryPageList(1)
});
function deleteUser(id,name){
layer.confirm("确认要删除"+name+"吗",{icon:3,title:"提示"},function(confirmIndex){
layer.close(confirmIndex);
$.ajax({
type:"POST",
data:{"id":id},
url:"${CWF_PATH}/advert/delete.do",
beforeSend:function(){
return true;
},success:function(data){
if(data.success){
window.location.href="${CWF_PATH}/advert/index.htm";
}else{
layer.msg(data.message, {time:1000, icon:6, shift:6});
}
},errot:function(){
layer.msg("删除数据失败！", {time:1000, icon:6, shift:6});
}
});
},function(confirmIndex){
layer.close(confirmIndex);
}
);
}
$("#allCheckBox").click(function(){
var checkBoxStatus = this.checked;
$("#tbodyConcat input[type='checkbox']").prop("checked",checkBoxStatus);
});
$('#tbodyConcat').on('change',"input[type='checkbox']",function(e){
var selectedCheckBox = $("#tbodyConcat input[type='checkbox']");
var isAllCehcked = true;
$.each(selectedCheckBox,function(){
if(!this.checked){
$("#allCheckBox").prop("checked",false);
isAllCehcked = false;
return false;
}
});
$("#allCheckBox").prop("checked",isAllCehcked);
});
</script>
</body>
</html>
2.2使用插件的jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/common_taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<%@ include file="/WEB-INF/jsp/common/common_css.jsp"%>
<style>
.tree li {
list-style-type: none;
cursor:pointer;
}
table tbody tr:nth-child(odd){background:#F4F4F4;}
table tbody td:nth-child(even){color:#C00;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" advert="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 广告管理</a></div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<%@include file="/WEB-INF/jsp/common/top.jsp" %>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tree">
<jsp:include page="/WEB-INF/jsp/common/menu.jsp"></jsp:include>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
</div>
<div class="panel-body">
<form class="form-inline" advert="form" style="float:left;">
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">查询条件</div>
<input id="queryText" class="form-control has-success" type="text" placeholder="请输入查询条件">
</div>
</div>
<button id="queryBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
</form>
<button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
<button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='${CWF_PATH}/advert/toAdd.htm'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
<br>
<hr style="clear:both;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr >
<th width="30">#</th>
<th width="30"><input id="allCheckBox" type="checkbox"></th>
<th>广告描述</th>
<th>状态</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody id="tbodyConcat">
</tbody>
<tfoot>
<tr >
<td colspan="5" align="center">
<!-- <ul class="pagination">
</ul> -->
<div id="Pagination" class="pagination">分页数据显示到这里</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<%@ include file="/WEB-INF/jsp/common/common_js.jsp"%>
<script type="text/javascript">
$(function () {
$(".list-group-item").click(function(){
if ( $(this).find("ul") ) {
$(this).toggleClass("tree-closed");
if ( $(this).hasClass("tree-closed") ) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
});
queryPageList(0);//插件0表示第一页
showMenu();
});
$("tbody .btn-success").click(function(){
window.location.href = "assignadvert.html";
});
$("tbody .btn-primary").click(function(){
window.location.href = "edit.html";
});
var loadingIndex = -1;
function queryPageList(pageNo){
var queryText = $("#queryText").val();
var jsonData = {"pageNo":(pageNo+1),//插件0表示第一页，但是后台查询还是从1开始
"pageSize":10,
"queryText":queryText}
$.ajax({
type:"POST",
data:jsonData,
url:"${CWF_PATH}/advert/doIndex.do",
beforeSend : function(){
loadingIndex = layer.load(2,{time:10*1000});
return true;
},success:function(data){
layer.close(loadingIndex);
if(data.success){
var page = data.page;
var pageData = data.page.pageList;
var html ="";
$.each(pageData,function (i,n){
html += '<tr>';
html += ' <td>'+(i+1)+'</td>';
html += ' <td><input type="checkbox" id="'+n.id+'" name="'+n.name+'"></td>';
html += ' <td>'+n.name +'</td>';
html += ' <td>'+n.status +'</td>';
html += ' <td>';
html += ' <button type="button" class="btn btn-success btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toAssignPermission.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-check"></i></button>';
html += ' <button type="button" class="btn btn-primary btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toUpdate.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-pencil"></i></button>';
html += ' <button type="button" class="btn btn-danger btn-xs" onclick="deleteUser('+n.id+',\''+n.name+'\')"><i class=" glyphicon glyphicon-remove"></i></button>';
html += ' </td>';
html += '</tr>';
});
$("#tbodyConcat").html(html);
// 创建分页，page.totalSize表示分页数据的总条数（比如返回97条数据，10条一页，按每页10条数据表示，一共有10页），totalsize就是97
$("#Pagination").pagination(page.totalSize, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
callback: queryPageList,
items_per_page:10, //每页显示1项
current_page:(page.pageNo-1),
prev_text:"上一页",
next_text:"下一页"
});
/* var content ="";
if(page.pageNo == 1){
content += '<li class="disabled"><a href="#">上一页</a></li>';
}else{
content += '<li><a href="#" onclick="pageChange('+(page.pageNo-1)+')">上一页</a></li>';
}
for(var i = 1;i<=page.totalPage;i++){
content +='<li><a href="#" onclick="pageChange('+i+')">'+i+'</a></li>';
}
if(page.pageNo == page.totalPage){
content += '<li class="disabled"><a href="#">下一页</a></li>';
}else{
content += '<li><a href="#" onclick="pageChange(('+(page.pageNo+1)+'))">下一页</a></li>';
}
$(".pagination").html(content); */
}else{
layer.msg(data.message, {time:1000, icon:6, shift:6});
}
},error:function(){
layer.msg("加载数据失败！", {time:1000, icon:6, shift:6});
}
});
}
$("#queryBtn").click(function (){
queryPageList(0)
});
function deleteUser(id,name){
layer.confirm("确认要删除"+name+"吗",{icon:3,title:"提示"},function(confirmIndex){
layer.close(confirmIndex);
$.ajax({
type:"POST",
data:{"id":id},
url:"${CWF_PATH}/advert/delete.do",
beforeSend:function(){
return true;
},success:function(data){
if(data.success){
window.location.href="${CWF_PATH}/advert/index.htm";
}else{
layer.msg(data.message, {time:1000, icon:6, shift:6});
}
},errot:function(){
layer.msg("删除数据失败！", {time:1000, icon:6, shift:6});
}
});
},function(confirmIndex){
layer.close(confirmIndex);
}
);
}
$("#allCheckBox").click(function(){
var checkBoxStatus = this.checked;
$("#tbodyConcat input[type='checkbox']").prop("checked",checkBoxStatus);
});
$('#tbodyConcat').on('change',"input[type='checkbox']",function(e){
var selectedCheckBox = $("#tbodyConcat input[type='checkbox']");
var isAllCehcked = true;
$.each(selectedCheckBox,function(){
if(!this.checked){
$("#allCheckBox").prop("checked",false);
isAllCehcked = false;
return false;
}
});
$("#allCheckBox").prop("checked",isAllCehcked);
});
</script>
</body>
</html>
3.Page类
package com.stuwork.crowdfunding.util;
import java.util.List;
public class Page {
private Integer pageNo;//当前页数
private Integer pageSize;//每页显示数
private Integer totalPage;//总页数
private Integer totalSize;//总记录数
private List pageList;
public Page(Integer pageNo,Integer pageSize){
if(pageNo <=0){
pageNo = 1;
}else{
this.pageNo = pageNo;
}
if(pageSize <= 0){
pageSize = 10;
}else{
this.pageSize = pageSize;
}
}
public Integer getPageNo() {
return pageNo;
}
public void setPageNo(Integer pageNo) {
this.pageNo = pageNo;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
public Integer getTotalPage() {
return totalPage;
}
private void setTotalPage(Integer totalPage) {
this.totalPage = totalPage;
}
public Integer getTotalSize() {
return totalSize;
}
public void setTotalSize(Integer totalSize) {
this.totalSize = totalSize;
this.totalPage = (totalSize%pageSize)==0?(totalSize/pageSize):(totalSize/pageSize+1);
}
public List getPageList() {
return pageList;
}
public void setPageList(List pageList) {
this.pageList = pageList;
}
//数据库查询开始索引
public Integer getStartIndex(){
return (this.pageNo - 1)*pageSize;
}
}
4.controller的方法
//分页同步请求（参数改为map接受，json封装）条件查询
@ResponseBody
@RequestMapping("/doIndex")
public Object index(@RequestParam(value="pageNo",required=false,defaultValue="1") Integer pageNo,
@RequestParam(value="pageSize",required=false,defaultValue="10")Integer pageSize,
String queryText){
AjaxResult result = new AjaxResult();
try {
Map<String,Object> map = new HashMap<String,Object>();
map.put("pageNo", pageNo);
map.put("pageSize", pageSize);
if(StringUtil.isNotEmpty(queryText)){
if(queryText.equals("%")){
//斜线本身需要转译,regex中两个\\表示一个\ ; Java中也是两个\\表示一个\;所以,需要四个斜线
queryText = queryText.replaceAll("%", "\\\\%");
}
map.put("queryText", queryText);
}
Page page = advertService.getPage(map);
result.setSuccess(true);
result.setPage(page);
} catch (Exception e) {
result.setSuccess(false);
result.setMessage("查询数据失败");
e.printStackTrace();
}
return result;
}
5.service方法
public Page getPage(Map<String, Object> map) {
//通过当前页，和每页显示的条数，取得mysql的查询索引startIndex
Page page = new Page((Integer) map.get("pageNo"), (Integer) map.get("pageSize"));
Integer startIndex = page.getStartIndex();
map.put("startIndex", startIndex);
List<Advertisement> pageList = advertisementMapper.queryList(map);
//取得分页的总记录数据
Integer totalSize = advertisementMapper.queryCount(map);
page.setPageList(pageList);
page.setTotalSize(totalSize);
return page;
}
6.mapper方法
<select id="queryList" parameterType="map" resultMap="BaseResultMap">
SELECT
id,
name,
iconpath,
status,
url,
userid
FROM t_advertisement
<where>
<if test="queryText != null">
name like concat("%",#{queryText},"%")
</if>
</where>
ORDER BY id DESC
LIMIT #{startIndex}, #{pageSize}
</select>