上图
上代码
新建html文件，代码如下：
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="pageContent">
<div class="page">
<div class="el-pagination">
<span class="prev">上一页</span>
<ul id="pageNav"></ul>
<span class="next">下一页</span>
<!-- <span id="endPage">尾页</span> -->
</div>
</div>
</div>
</body>
<script>
var pageSize = 10//总页数
var curNum = 2//每页显示数
pageMain(pageSize, curNum)
function pageMain(pageSize, curNum) {
$(function () {
$(".thispage").html(1);
tabPage({
pageMain: '.listContentitems', // 数据库
pageNav: '#pageNav', // 第几页
pagePrev: '.prev', // 上一页
pageNext: '.next', // 下一页
endPage: '#endPage', // 最后一页
curNum: curNum,
pageSize: pageSize,
/*每页显示的条数*/
activeClass: 'active',
/*选中的页数*/
ini: 0 /*初始化显示的页面*/
});
function tabPage(tabPage) { // 分页的方法
var pageMain = $(tabPage.pageMain);
/*获取内容列表*/
var pageNav = $(tabPage.pageNav);
/*获取分页*/
var pagePrev = $(tabPage.pagePrev);
/*上一页*/
var pageNext = $(tabPage.pageNext);
/*下一页*/
var endPage = $(tabPage.endPage);
var curNum = tabPage.curNum;
/*每页显示数*/
var len = tabPage.pageSize;
/*计算总页数*/
$(".totalpage").html(len)
console.log(len)
// console.log(pageMain.find(".item").length);
var pageList = '';
/*生成页码*/
var iNum = 0;
/*当前的索引值*/
var pageSize = len;
// 页码大于等于4的时候，添加第一个页码元素
if ((iNum + 1) != 1 && (iNum + 1) >= 4 && pageSize != 4) {
pageList += '<a href="javascript:;">' + 1 + +'</a>';
}
/* 当前页码>4, 并且<=总页码，总页码>5，添加“···”*/
if ((iNum + 1) - 2 > 2 && (iNum + 1) <= pageSize && pageSize > 5) {
pageList += '<a href="javascript:;">...</a>';
}
/* 当前页码的前两页 */
var start = iNum - 2;
/* 当前页码的后两页 */
var end = (iNum + 1) + 2;
if ((start > 1 && (iNum + 1) < 4) || (iNum + 1) == 1) {
end++;
}
if ((iNum + 1) > pageSize - 4 && (iNum + 1) >= pageSize) {
start--;
}
for (; start <= end; start++) {
if (start <= pageSize && start >= 1) {
pageList += '<a href="javascript:;">' + start + '</a>';
}
}
if ((iNum + 1) + 2 < pageSize - 1 && (iNum + 1) >= 1 && pageSize > 5) {
console.log(1111)
pageList += '<a href="javascript:;">...</a>';
}
if ((iNum + 1) != pageSize && (iNum + 1) < pageSize - 2 && pageSize != 4) {
pageList += '<a href="javascript:;">' + pageSize + '</a>';
}
$("#pageNav").html(pageList);
/*头一页加高亮显示*/
$("#pageNav").find("a:first").addClass(tabPage.activeClass);
$(".listContentitems").find(".item").hide();
/************首页的显示*********/
for (var i = 0; i < curNum; i++) {
$(".listContentitems").find(".item").eq(i).show()
}
}
})
}
var val = ''
$(".el-pagination").on("click", "ul a", function () {
let index = $(".el-pagination ul a").index(this);
console.log(index)
val = $(".el-pagination ul a").eq(index).text()
val = parseInt(val)
pageFn(val, pageSize)
$(".el-pagination ul a").removeClass("active");
$(".el-pagination ul a").each(function () {
if ($(this).text() == val) {
$(this).addClass("active");
}
})
$(".thispage").html(val);
$(".tableMiddle").find(".tableItem").hide();
for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
$(".tableMiddle").find(".tableItem").eq(i).show()
}
})
/*上一页*/
$(".prev").on("click", function () {
console.log('上一页')
$(".tableMiddle").find(".tableItem").hide();
if (val == '') {
val = 1
}
if (val == 1) {
alert('当前是第一页');
$(".thispage").html(1);
for (var i = 0; i < curNum; i++) {
$(".tableMiddle").find(".tableItem").eq(i).show()
}
return false;
} else {
pageFn(val, pageSize)
$(".thispage").html(val - 1);
$("#pageNav").find("a").removeClass("active");
val--;
$(".el-pagination ul a").each(function () {
if ($(this).text() == val) {
$(this).addClass("active");
}
})
}
for (var i = (val - 1) * curNum; i < val * curNum; i++) {
$(".tableMiddle").find(".tableItem").eq(i).show()
}
})
// 下一页
$(".next").on("click", function () {
$(".tableMiddle").find(".tableItem").hide();
if (val == pageSize) {
alert('已经是最后一页');
$(".thispage").html(val);
for (var i = (pageSize - 1) * curNum; i < pageSize * curNum; i++) {
$(".tableMiddle").find(".tableItem").eq(i).show()
}
return false;
} else {
if (val == '') {
val = 1
}
pageFn(val, pageSize)
$(".thispage").html(val + 1);
$("#pageNav").find("a").removeClass("active");
val++;
$(".el-pagination ul a").each(function () {
if ($(this).text() == val) {
$(this).addClass("active");
}
})
}
for (var i = (val - 1) * curNum; i < val * curNum; i++) {
$(".tableMiddle").find(".tableItem").eq(i).show()
}
});
function pageFn(val, pageSize) {
$("#pageNav").html('');
var pageList = ''
// 页码大于等于4的时候，添加第一个页码元素
if (val != 1 && val >= 4 && pageSize != 4) {
pageList += '<a href="javascript:;">' + 1 + '</a>';
}
/* 当前页码>4, 并且<=总页码，总页码>5，添加“···”*/
if (val - 2 > 2 && val <= pageSize && pageSize > 5) {
pageList += '<a href="javascript:;">...</a>';
}
/* 当前页码的前两页 */
var start = val - 2; //-1
/* 当前页码的后两页 */
var end = val + 2; //3
if ((start > 1 && val < 4) || val == 1) {
end++;
}
if (val > pageSize - 4 && val >= pageSize) {
start--;
}
for (; start <= end; start++) {
if (start <= pageSize && start >= 1) {
pageList += '<a href="javascript:;">' + start + '</a>';
}
}
if (val + 2 < pageSize - 1 && val >= 1 && pageSize > 5) {
pageList += '<a href="javascript:;">...</a>';
}
if (val != pageSize && val < pageSize - 2 && pageSize != 4) {
pageList += '<a href="javascript:;">' + pageSize + '</a>';
}
// pageList +='<li><a data="' + data.pageCount + '">»</a></li>';
$("#pageNav").html(pageList);
}
</script>
<style>
.pageContent {
height: 100px;
background-color: #fff;
margin-bottom: 62px;
}
.page {
text-align: center;
padding: 30px 0;
}
.page {
padding: 28px 0 0 0;
}
.page span {
display: inline-block;
width: 60px;
height: 24px;
line-height: 24px;
text-align: center;
color: #000;
}
.el-pagination button,
.el-pagination span:not([class*=suffix]) {
display: inline-block;
font-size: 13px;
min-width: 35.5px;
height: 40px;
line-height: 37px;
vertical-align: top;
box-sizing: border-box;
border: 1px solid #DADADA;
color: #666666;
width: 80px;
}
#pageNav {
display: inline-block;
}
a {
text-decoration: none;
font-size: 16px;
font-size: 12px;
color: #333;
}
#pageNav a {
display: inline-block;
width: 40px;
height: 40px;
line-height: 37px;
text-align: center;
color: #666666;
border: 1px solid #DADADA;
text-decoration: none;
}
#pageNav a.active,
#pageNav a:hover {
color: #2E5EC0;
font-weight: bold;
}
.el-pager {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
list-style: none;
display: inline-block;
vertical-align: top;
font-size: 0;
padding: 0;
margin: 0;
}
.page .el-pager li.active {
height: 26px;
width: 26px;
color: #fff;
background: #ec554c;
}
.el-pager li.active {
color: #606ca5;
cursor: default;
}
.page .el-pager li {
height: 26px;
width: 26px;
min-width: 26px;
line-height: 26px;
margin-left: 8px;
border-radius: 26px;
background: transparent;
}
.el-pager li {
padding: 0 4px;
background: #fff;
vertical-align: top;
display: inline-block;
font-size: 13px;
min-width: 35.5px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
margin: 0;
}
li {
list-style-type: none;
}
.el-pager li.btn-quicknext,
.el-pager li.btn-quickprev {
line-height: 28px;
color: #303133;
}
ul {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.page .el-pager li {
height: 26px;
width: 26px;
min-width: 26px;
line-height: 26px;
margin-left: 8px;
border-radius: 26px;
background: transparent;
}
.el-pager li {
padding: 0 4px;
background: #fff;
vertical-align: top;
display: inline-block;
font-size: 13px;
min-width: 35.5px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
margin: 0;
}
[class*=" el-icon-"],
[class^=el-icon-] {
font-family: element-icons !important;
speak: none;
font-style: normal;
font-weight: 400;
font-feature-settings: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-pager .more:before {
line-height: 30px;
}
</style>
</html>