为方便朋友理解分页,特地给她用jQuery写个分页模型;
样式可自行调整,若需要跳转页面或其它功能,就自行增加了;
话不多说,直接上码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>分页</title>
</head>
<style type="text/css">
#pagerForm {background: #FFFFFF}
.pagination {
padding: 5px;
font-size:14px
}
.pagination a, .pagination a:link, .pagination a:visited {
padding:10px 16px;
margin:2px;
border:1px solid #3E90F7;
border-radius: 4px!important;
text-decoration:none;
color:#3E90F7
}
.pagination a:hover, .pagination a:active {
background: #3E90F7;
color: #FFFFFF;
border: 1px solid #3E90F7;
border-radius:4px !important;
text-decoration: none
}
.pagination span.current{
padding: 10px 16px;
margin: 2px;
border: 1px solid #3E90F7;
border-radius:4px !important;
font-weight: bold;
background-color: #3E90F7;
color: #FFFFFF
}
.pagination span.disabled {
padding: 10px 16px;
margin: 2px;
border: 1px solid #eee;
border-radius: 4px !important;
color: #ddd
}
#select {
padding: 5px 0px;
border: 1px solid rgba(228, 228, 228, 1);
border-radius:4px !important
}
</style>
<body>
<div class="pagination">
<form id="pagerForm">
</form >
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var pageIndex=1;
var pageSize=10;
var pageCount=100;
window.runPage=function runPage(pageIndex,pageSize,pageCount){
var start = 1;
var end = pageIndex + 1;
//页号越界处理
if (pageIndex > pageCount) {
pageIndex = pageCoun;
}
if (pageIndex < 1) {
pageIndex = 1;
}
//上一页处理
var disabled;
if(pageIndex == 1){
disabled=$('<span class="disabled">上一页</span>');
}else{
disabled=$('<a href="javascript:void(0);" onclick="toPage('+(pageIndex-1)+')">上一页</a>');
}
disabled.appendTo('#pagerForm');
//如果前面页数过多,显示...
if (pageIndex > 4) {
start = pageIndex - 1;
var a1 = $('<a href="javascript:void(0);" onclick="toPage(1)">1</a>');
var a2 = $('<a href="javascript:void(0);" onclick="toPage(2)">2</a>…');
a1.appendTo('#pagerForm');
a2.appendTo('#pagerForm');
var i1 = $('<i> ... </i>');
i1.appendTo('#pagerForm');
}
//显示当前页号和它附近的页号
if(end> pageCount){
end=pageCount;
}
for (var i = start;i <= end; i++) {
if (pageIndex == i) {
var current = $('<span class="current">' + i + '</span>');
current.appendTo('#pagerForm');
} else {
var noCurrent = $('<a href="javascript:void(0);" onclick="toPage(' + i + ')">' + i + '</a>');
noCurrent.appendTo('#pagerForm');
}
}
//如果后面页数过多,显示...
if (end < pageCount - 2) {
var i2 = $('<i> ... </i>');
i2.appendTo('#pagerForm');
}
if (end < pageCount - 1) {
var a3 = $('<a href="javascript:void(0);" onclick="toPage(' + (pageCount - 1) + ')">' + (pageCount - 1) + '</a>');
a3.appendTo('#pagerForm');
}
if (end < pageCount) {
var a4 = $('<a href="javascript:void(0);" onclick="toPage(' + pageCount + ')">' + pageCount + '</a>');
a4.appendTo('#pagerForm');
}
var lastSpan;
if (pageIndex == pageCount) {
lastSpan = $('<span class="disabled">下一页</span>');
} else {
lastSpan = $('<a href="javascript:void(0);" onclick="toPage(' + (pageIndex + 1) + ')">下一页</a>');
}
lastSpan.appendTo('#pagerForm');
}
runPage(pageIndex, pageSize, pageCount);
function toPage(index){
//获取当前页码
$('#pagerForm').text('');
pageIndex=index;
runPage(pageIndex, pageSize, pageCount);
// 设置表单请求的URL地址
// $("#pagerForm").action="${toURL}";
// 表单提交
// $("#pagerForm").submit();
}
</script>
</html>