分页效果如下：
pagination.js
function Page(_ref) {
var pageCount = _ref.pageCount,
pageTotal = _ref.pageTotal,
curPage = _ref.curPage,
id = _ref.id,
getPage = _ref.getPage,
showPageTotalFlag = _ref.showPageTotalFlag,
showSkipInputFlag = _ref.showSkipInputFlag,
pageSize = _ref.pageSize,
dataTotal = _ref.dataTotal,
condition = _ref.condition,
url = _ref.url,
showTable = _ref.showTable;
if(!pageCount){
pageCount = 0
};
if(!pageTotal){
pageTotal = 0
};
if(!pageSize){
pageSize = 0
};
if(!dataTotal){
dataTotal = 0
};
this.url = url;
this.pageCount = pageCount || 5; //分页个数
this.pageTotal = pageTotal; //总共多少页
this.pageSize = pageSize; //每页多少条
this.dataTotal = dataTotal; //总共多少数据
this.curPage = curPage || 1; //初始页码
this.ul = document.createElement('ul');
this.id = id;
this.getPage = getPage;
this.showTable = showTable;
this.showPageTotalFlag = showPageTotalFlag || false; //是否显示数据统计
this.showSkipInputFlag = showSkipInputFlag || false; //是否支持跳转
this.condition = condition;
var data = this.queryData(this.url,this.curPage,this.pageSize);
if(data.dataTotal <0 && data.pageTotal<0){
return;
}
this.pageTotal = data.totalPage; //总共多少页
this.dataTotal = data.totalRecord; //总共多少数据
if(this.dataTotal >0 &&this.pageTotal>0){
this.showTable(data);
this.init();
}else{
console.error("总页数或者总数据参数不对")
}
};
// 给实例对象添加公共属性和方法
Page.prototype = {
init: function init() {
var pagination = document.getElementById(this.id);
pagination.innerHTML = '';
this.ul.innerHTML = '';
pagination.appendChild(this.ul);
var that = this;
//首页
that.firstPage();
//上一页
that.lastPage();
//分页
that.getPages().forEach(function (item) {
var li = document.createElement('li');
if (item == that.curPage) {
li.className = 'active';
} else {
li.onclick = function () {
that.curPage = parseInt(this.innerHTML);
that.init();
var cData = that.queryData(that.url,that.curPage,that.pageSize);
that.showTable(cData);
};
}
li.innerHTML = item;
that.ul.appendChild(li);
});
//下一页
that.nextPage();
//尾页
that.finalPage();
//是否支持跳转
if (that.showSkipInputFlag) {
that.showSkipInput();
}
//是否显示总页数,每页个数,数据
if (that.showPageTotalFlag) {
that.showPageTotal();
}
},
queryData: function queryData(url,curPage,pageSize){
var page = {
curPage: curPage,
pageSize: pageSize
};
var condit = $.extend(this.condition, page);
var data = null;
$.ajax({
type:"GET",
url: url,
async: false,
data: condit,
dataType:"json",
success:function(result){
data = result;
}
});
return data;
},
//首页
firstPage: function firstPage() {
var that = this;
var li = document.createElement('li');
$(li).attr("title","首页");
li.innerHTML = '<i class="fa fa-angle-double-left"></i>';
this.ul.appendChild(li);
li.onclick = function () {
var val = parseInt(1);
that.curPage = val;
var cData = that.queryData(that.url,that.curPage,that.pageSize);
that.showTable(cData);
that.init();
};
},
//上一页
lastPage: function lastPage() {
var that = this;
var li = document.createElement('li');
$(li).attr("title","上一页");
li.innerHTML = '<i class="fa fa-angle-left"></i>';
if (parseInt(that.curPage) > 1) {
li.onclick = function () {
that.curPage = parseInt(that.curPage) - 1;
var cData = that.queryData(that.url,that.curPage,that.pageSize);
that.showTable(cData);
that.init();
};
} else {
li.className = 'disabled';
}
this.ul.appendChild(li);
},
//分页
getPages: function getPages() {
var pag = [];
if (this.curPage <= this.pageTotal) {
if (this.curPage < this.pageCount) {
//当前页数小于显示条数
var i = Math.min(this.pageCount, this.pageTotal);
while (i) {
pag.unshift(i--);
}
} else {
//当前页数大于显示条数
var middle = this.curPage - Math.floor(this.pageCount / 2),
//从哪里开始
i = this.pageCount;
if (middle > this.pageTotal - this.pageCount) {
middle = this.pageTotal - this.pageCount + 1;
}
while (i--) {
pag.push(middle++);
}
}
} else {
console.error('当前页数不能大于总页数');
}
if (!this.pageCount) {
console.error('显示页数不能为空或者0');
}
return pag;
},
//下一页
nextPage: function nextPage() {
var that = this;
var li = document.createElement('li');
$(li).attr("title","下一页");
li.innerHTML = '<i class="fa fa-angle-right"></i>';
if (parseInt(that.curPage) < parseInt(that.pageTotal)) {
li.onclick = function () {
that.curPage = parseInt(that.curPage) + 1;
var cData = that.queryData(that.url,that.curPage,that.pageSize);
that.showTable(cData);
that.init();
};
} else {
li.className = 'disabled';
}
this.ul.appendChild(li);
},
//尾页
finalPage: function finalPage() {
var that = this;
var li = document.createElement('li');
$(li).attr("title","尾页");
li.innerHTML = '<i class="fa fa-angle-double-right"></i>';
this.ul.appendChild(li);
li.onclick = function () {
var yyfinalPage = that.pageTotal;
var val = parseInt(yyfinalPage);
that.curPage = val;
var cData = that.queryData(that.url,that.curPage,that.pageSize);
that.showTable(cData);
that.init();
};
},
//是否支持跳转
showSkipInput: function showSkipInput() {
var that = this;
var li = document.createElement('li');
li.className = 'totalPage';
var span1 = document.createElement('span');
span1.innerHTML = '跳转到第';
li.appendChild(span1);
var input = document.createElement('input');
input.setAttribute("type","number");
input.onkeydown = function (e) {
var oEvent = e || event;
if (oEvent.keyCode == '13') {
var val = parseInt(oEvent.target.value);
if (typeof val === 'number' && val <= that.pageTotal && val>0) {
that.curPage = val;
//that.getPage(that.curPage);
var cData = that.queryData(that.url,that.curPage,that.pageSize);
that.showTable(cData);
}else{
alert("请输入正确的页数 !")
}
that.init();
}
};
li.appendChild(input);
var span2 = document.createElement('span');
span2.innerHTML = '页';
li.appendChild(span2);
this.ul.appendChild(li);
},
//是否显示总页数,每页个数,数据
showPageTotal: function showPageTotal() {
var that = this;
/*
var li = document.createElement('li');
li.innerHTML = '共 ' + that.pageTotal + ' 页';
li.className = 'totalPage';
this.ul.appendChild(li);
var li2 = document.createElement('li');
li2.innerHTML = '每页 ' + that.pageSize + ' 条';
li2.className = 'totalPage';
this.ul.appendChild(li2);
var li3 = document.createElement('li');
li3.innerHTML = '合计 ' + that.dataTotal + ' 条数据';
li3.className = 'totalPage';
this.ul.appendChild(li3);
*/
var lis = document.createElement('li');
lis.innerHTML = '共' + that.pageTotal + '页/' + that.dataTotal + '条';
lis.className = 'totalPage';
this.ul.appendChild(lis);
}
};pagination.css
.pagination ul {
list-style: none;
padding-left: 0;
}
.pagination ul li {
padding: 0 10px;
vertical-align: top;
display: inline-block;
font-size: 14px;
min-width: 36px;
min-height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
background-color: #ffffff;
color: #606266;
border-radius: 3px;
margin: 0 1px;
border: 1px solid #ebebeb;
height: 30px;
}
.pagination ul li:hover {
/* transform: scale(1.1);
background-color: #F4F6F8; */
}
.pagination li.active {
/* background: #98A6AD; */
background-color: rgba(26, 188, 156, 1);
color: white;
cursor: not-allowed;
}
.pagination li.disabled {
cursor: not-allowed;
}
.pagination li.totalPage {
background: transparent;
cursor: default;
border: none;
padding: 0 6px;
}
.pagination li.totalPage:hover {
transform: none;
background-color: #ffffff;
}
.pagination li input {
/* -webkit-appearance: none; */
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
outline: none;
padding: 3px 5px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 40px;
height: 25px;
margin: 0 6px;
}
.pagination li input:focus{
border-color: #98A6AD;
}
.pagination{
user-select: none;
}
.pagination ul:nth-child(2){
border-radius: 0px;
}
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="javax.servlet.http.Cookie"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角色管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../css/font.css">
<link rel="stylesheet" href="../css/xadmin.css">
<link rel="stylesheet" href="../css/pagination/pagination.css">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/xadmin.js"></script>
<script src="../js/pagination/pagination.js"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="x-body">
<xblock style="height: 40px;">
<input type="text" name="rolename" id="select_role_name" placeholder="请输入角色名" autocomplete="off" class="layui-input" style="width: 200px;float:left">
<button class="layui-btn" id="searchBtn" lay-submit="" lay-filter="sreach" title="搜索" style="margin-left: 4px;float:left"><i class="layui-icon"></i></button>
<button class="layui-btn" onclick="x_admin_show('添加角色','${pageContext.request.contextPath}/role/toAddPage.htm')" style="float:right"><i class="layui-icon"></i>添加</button>
</xblock>
<table class="layui-table">
<thead>
<tr>
<!-- <th>ID</th> -->
<th>角色名</th>
<th>创建时间</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<div id="pagination" class="pagination" style="float:right"></div>
</div>
<script>
window.onload = function () {
var setting = {
id: 'pagination',
url: "${pageContext.request.contextPath}/role/pageList.htm",
condition: {//搜索条件
roleName: $("#select_role_name").val()
},
pageSize: 5, //每页多少条
curPage: 1, //初始页码,不填默认为1
pageCount: 5, //分页个数,不填默认为5
showPageTotalFlag:true, //是否显示数据统计,不填默认不显示
showSkipInputFlag:true, //是否支持跳转,不填默认不显示
showTable: function (data) {
var dataList = data.dataList;
$("#tbody").empty();
for (var i = 0; i < dataList.length; i++){
var data = dataList[i];
var tr = $("<tr>");
/* $(tr).append('<td>' + data.roleId + '</td>'); */
$(tr).append('<td>' + data.roleName + '</td>');
$(tr).append('<td>' + data.createTime + '</td>');
$(tr).append('<td>' + data.description + '</td>');
$(tr).append('<td><a onclick="x_admin_show(\'编辑角色\',\'${pageContext.request.contextPath}/role/toEditPage.htm?roleId='+data.roleId+'\')" title="编辑" href="javascript:;"><i class="layui-icon"></i></a></td>');
$("#tbody").append(tr);
}
}
};
new Page(setting);
/* 搜索按钮 */
$('#searchBtn').on('click',function(){
$("#pagination").empty();
var cliSetting = $.extend(setting,{condition: {
roleName: $("#select_role_name").val().trim()
}});
new Page(cliSetting);
});
};
</script>
</body>
</html>PageBean.java
import java.io.Serializable;
import java.util.List;
/**
*
* 分页实体类
*
* @since 1.0.0
*/
public class PageBean<T> implements Serializable{
/**
*
*/
private static final long serialVersionUID = -7308601634840537272L;
/**
* 当前页
*/
private int curPage;
/**
* 每页大小
*/
private int pageSize;
/**
* 总数据条数
*/
private int totalRecord;
/**
* 总页数，通过totalRecord和pageSize计算可以得来
*/
private int totalPage;
/**
* 开始索引，也就是我们在数据库中要从第几行数据开始拿，有了startIndex和pageSize，
* 就知道了limit语句的两个数据，就能获得每页需要显示的数据了
*/
private int startIndex;
/**
* 将每页要显示的数据放在list集合中
*/
private List<T> dataList;
//分页显示的页数,比如在页面上显示1，2，3，4，5页，start就为1，end就为5，这个也是算过来的
private int start;
private int end;
//通过pageNum，pageSize，totalRecord计算得来tatalPage和startIndex
//构造方法中将pageNum，pageSize，totalRecord获得
public PageBean(int curPage,int pageSize,int totalRecord) {
this.curPage = curPage;
this.pageSize = pageSize;
this.totalRecord = totalRecord;
//totalPage 总页数
if(totalRecord % pageSize==0){
//说明整除，正好每页显示pageSize条数据，没有多余一页要显示少于pageSize条数据的
this.totalPage = totalRecord / pageSize;
}else{
//不整除，就要在加一页，来显示多余的数据。
this.totalPage = totalRecord / pageSize +1;
}
//开始索引
this.startIndex = (curPage-1)*pageSize ;
//显示5页，这里自己可以设置，想显示几页就自己通过下面算法修改
this.start = 1;
this.end = 5;
//显示页数的算法
if(totalPage <=5){
//总页数都小于5，那么end就为总页数的值了。
this.end = this.totalPage;
}else{
//总页数大于5，那么就要根据当前是第几页，来判断start和end为多少了，
this.start = curPage - 2;
this.end = curPage + 2;
if(start < 0){
//比如当前页是第1页，或者第2页，那么就不如和这个规则，
this.start = 1;
this.end = 5;
}
if(end > this.totalPage){
//比如当前页是倒数第2页或者最后一页，也同样不符合上面这个规则
this.end = totalPage;
this.start = end - 5;
}
}
}
public int getCurPage() {
return curPage;
}
public void setCurPage(int curPage) {
this.curPage = curPage;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getTotalRecord() {
return totalRecord;
}
public void setTotalRecord(int totalRecord) {
this.totalRecord = totalRecord;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getStartIndex() {
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
public List<T> getDataList() {
return dataList;
}
public void setDataList(List<T> dataList) {
this.dataList = dataList;
}
public int getStart() {
return start;
}
public void setStart(int start) {
this.start = start;
}
public int getEnd() {
return end;
}
public void setEnd(int end) {
this.end = end;
}
}controller方法
@ResponseBody
@RequestMapping("/pageList")
public PageBean<RoleEntity> getRolesByCondition(String roleName, int curPage, int pageSize){
int totalRecord = roleService.findRoleCount(roleName);
PageBean<RoleEntity> page = new PageBean<>(curPage, pageSize, totalRecord);
List<RoleEntity> roles = roleService.findRolesByPage(roleName, page.getStartIndex(), page.getPageSize());
page.setDataList(roles);
return page;
}
5476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
