常用分页插件
复制代码看看效果吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用分页</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
* {
padding: 0px;
margin: 0px;
list-style: none;
}
.page a {
color: #000;
text-decoration: none;
}
.page a:hover,
.page .page-form .go:hover,
.page .page-prev:hover,
.page .page-next:hover {
background: dodgerblue;
}
.page span,
.page div {
vertical-align: middle
}
.page .page-prev,
.page .page-next {
text-decoration: none;
}
.page .page-num a,
.page .page-prev,
.page .page-next {
padding: 6px 14px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.page .page-num,
.page .page-info,
.page .page-form {
display: inline-block;
}
.page .page-num a {
float: left;
margin: 12px;
margin: 4px;
}
.page .page-num a.current {
background: dodgerblue;
}
.page .page-form input {
40px;
height: 28px;
border: 1px solid #ccc;
box-sizing: border-box;
padding-left: 3px;
text-align: center;
color: #000;
}
.page .page-form .go {
vertical-align: middle;
border-radius: 4px;
padding: 6px 14px;
border: 1px solid #ccc;
background: #ccc;
}
</style>
</head>
<body>
<div class="page">
<span class="page-prev">上一页</span>
<div class="page-num" id="idPage-num">
</div>
<span class="page-next">下一页</span>
<div class="page-info">
<span>共</span><span id="curretnNum">2</span><span>/</span><span id="pageCoun">20</span>
</div>
<div class="page-form">
<span>跳转到</span>
<input id="goNume" type="text"> <span>页</span> <a class="go" id="idgo" href="#">确认</a>
</div>
</div>
</body>
</html>
<script>
function mathPages(index, totalpage) { //页码和一共有多少页
console.log(index, totalpage)
index = parseInt(index);
var indexs = [];
var pageNum;
for (var i = 1; i <= totalpage; i++) {
indexs.push(i); //先根据总页数创建数组，将全部页标添加到数组中
}
if (totalpage <= 5) {
pageNum = indexs; //总页数<=5页时，直接输出即可
}
if (index <= 2) {
pageNum = indexs.slice(0, 5); //当前页<=2时，当前页的页标就不能显示在第三位了，直接截取0~5输出
} else {
var indexs2 = indexs.slice(index - 3, index + 2);
//如果当前页标>2，则从当前页标-3开始截取总页标数组，截取5个
if (indexs2.length >= 5) {
pageNum = indexs2; //如果当前页不是倒数后3页，则截取没问题，直接输出
} else {
pageNum = indexs.slice(-5); //如果当前页是倒数后3页，就截取不到6个页标，那么直接最后截取6个页标即可
}
}
$('.page #idPage-num').html('');
for (var i = 0; i < pageNum.length; i++) {
$('.page #idPage-num').append('<a href="#">' + pageNum[i] + '</a>');
}
$('.page #curretnNum').html(index)
$('.page #pageCoun').html(totalpage);
$('.page #idPage-num a:contains(' + index + ')').addClass('current');
}
mathPages(2, 20);
$('.page').on('click', ' #idPage-num a', function() {
var pageCurrent = $(this).text();
mathPages(pageCurrent, 20);
})
var currentPagePrev, currentPageNext;
$('.page').on('click', '.page-prev', function(e) {
getCurrentPage()
mathPages(currentPagePrev, 20);
})
$('.page').on('click', '.page-next', function(e) {
getCurrentPage()
mathPages(currentPageNext, 20);
})
$('.page').on('click', "#idgo", function(e) {
getCurrentPage();
var goPage = parseInt($.trim($('#goNume').val()));
var countPage = $('.page #pageCoun').text();
if (goPage > countPage) {
$('.page #goNume').val('');
$('.page #goNume').focus();
alert('您输入了页码超过了总页数，请重新输入');
return false;
}
})
function getCurrentPage() {
currentPagePrev = $('.page .page-num').find('a[class="current"]').prev().text();
currentPageNext = $('.page .page-num').find('a[class="current"]').next().text();
}
</script>