<html>
<head>
<meta charset="UTF-8">
<title>分页测试</title>
<style type="text/css">
span {
width: 20px;
height: 20px;
border: 1px solid #ccc;
border-radius: 2px;
display: block;
float: left;
margin-left: 5px;
cursor: pointer;
text-align: center;
line-height: 20px;
}
.result {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.page-btn').on('click', function() {
var _html = '';
var _currentNum = parseInt($('#currentNum').val());
var _countNum = parseInt($('#countNum').val());
var _firstNum = _currentNum - 2;
var _lastNum = _currentNum + 2;
if (_countNum <= 6) {
_firstNum = 1;
_lastNum = _countNum;
}
if (_firstNum < 1) {
_lastNum = _lastNum + (1 - _firstNum);
_firstNum = 1;
}
if (_lastNum > _countNum) {
_firstNum = _firstNum - (_lastNum - _countNum);
_lastNum = _countNum;
}
_html += '<span class="befor-page"><</span>';
if (_firstNum !== 1) {
_html += '<span>1</span>';
}
if (_firstNum - 1 > 1) {
_html += '<span>…</span>';
}
for (var i = _firstNum; i <= _lastNum; i++) {
if (i === _currentNum) {
_html += '<span style="color:red;">' + i + '</span>'
} else {
_html += '<span>' + i + '</span>'
}
}
if (_countNum - _lastNum > 1) {
_html += '<span>…</span>';
}
if (_lastNum !== _countNum) {
_html += '<span>' + _countNum + '</span>';
}
_html += '<span class="after-page">></span>';
$('.result').html(_html);
});
$(document).delegate('.result>span', 'click', function() {
var _this = this;
var _currentNum = parseInt($('#currentNum').val());
var _countNum = parseInt($('#countNum').val());
var _activeNum = parseInt($(_this).html());
if ($(_this).hasClass('befor-page')) {
_currentNum -= 1;
} else if ($(_this).hasClass('after-page')) {
_currentNum += 1;
} else if (!_activeNum) {
return;
} else {
_currentNum = _activeNum;
}
if (_currentNum < 1) {
_currentNum = 1;
}
if (_currentNum > _countNum) {
_currentNum = _countNum;
}
$('#currentNum').val(_currentNum);
$('.page-btn').click();
});
});
</script>
</head>
<body>
<label for="currentNum">当前页：</label>
<input type="text" id="currentNum" value="7">
<label for="countNum">总页数：</label>
<input type="text" id="countNum" value="70">
<input class="page-btn" type="button" value="分页结果">
<div class="result"></div>
</body>
</html>
