java带省略号的分页_分页带省略号-中间三个点

上一页

下一页

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 += '' + 1 + +'';

}

/* 当前页码>4, 并且<=总页码，总页码>5，添加“···”*/

if ((iNum + 1) - 2 > 2 && (iNum + 1) <= pageSize && pageSize > 5) {

pageList += '...';

}

/* 当前页码的前两页 */

var start = iNum - 2;

/* 当前页码的后两页 */

var end = (iNum + 1) + 2;

if ((start > 1 && (iNum + 1) 

end++;

}

if ((iNum + 1) > pageSize - 4 && (iNum + 1) >= pageSize) {

start--;

}

for (; start <= end; start++) {

if (start <= pageSize && start >= 1) {

pageList += '' + start + '';

}

}

if ((iNum + 1) + 2 = 1 && pageSize > 5) {

console.log(1111)

pageList += '...';

}

if ((iNum + 1) != pageSize && (iNum + 1) 

pageList += '' + pageSize + '';

}

$("#pageNav").html(pageList);

/*头一页加高亮显示*/

$("#pageNav").find("a:first").addClass(tabPage.activeClass);

$(".listContentitems").find(".item").hide();

/************首页的显示*********/

for (var i = 0; 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 

$(".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 

$(".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 

$(".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 

$(".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 

$(".tableMiddle").find(".tableItem").eq(i).show()

}

});

function pageFn(val, pageSize) {

$("#pageNav").html('');

var pageList = ''

// 页码大于等于4的时候，添加第一个页码元素

if (val != 1 && val >= 4 && pageSize != 4) {

pageList += '' + 1 + '';

}

/* 当前页码>4, 并且<=总页码，总页码>5，添加“···”*/

if (val - 2 > 2 && val <= pageSize && pageSize > 5) {

pageList += '...';

}

/* 当前页码的前两页 */

var start = val - 2; //-1

/* 当前页码的后两页 */

var end = val + 2; //3

if ((start > 1 && val 

end++;

}

if (val > pageSize - 4 && val >= pageSize) {

start--;

}

for (; start <= end; start++) {

if (start <= pageSize && start >= 1) {

pageList += '' + start + '';

}

}

if (val + 2 = 1 && pageSize > 5) {

pageList += '...';

}

if (val != pageSize && val 

pageList += '' + pageSize + '';

}

// pageList +='

»';

$("#pageNav").html(pageList);

}

.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;

}