java带省略号的分页_JS实现带省略号的长分页显示

带有省略号的分页

---

«12345»

$(function() {varpagingInfo=$("#pageInfo")vardata={

pageCount :100,

}//表示前后都有省略号时中间页面刷新基准，为了防止点击中间时页面频繁刷新页面导致的视觉错位

vartmpPageIndex= 0;//添加事件

$(document).on("click","#pageInfo li a",function() {

let page=$(this).attr("page")if(page){

page=parseInt(page)

refreshPageInfo(data, page);

}

})//刷新|生成分页信息|自定义属性page表示当前页面索引

functionrefreshPageInfo(data, pageIndex) {varpageSize=data.pageCount

pagingInfo.html('')varli=$('

«')

pagingInfo.append(li)//总页数小于等于10页，全部显示

if(pageSize<= 10) {for(vari= 1; i<=pageSize; i++) {varli=$('

' +i+ '')

addActive(li, i, pageIndex)

pagingInfo.append(li)

}//当前页是前10页

}else if(pageIndex< 10) {for(vari= 1; i<= 10; i++) {varli=$('

' +i+ '')

addActive(li, i, pageIndex)

pagingInfo.append(li)

}

pagingInfo.append('

......')

pagingInfo.append('

' +pageSize+ '')//当前页面是最后10页

}else if(pageSize-pageIndex< 10) {if(pageSize- 10 > 1) {

pagingInfo.append('

1')

pagingInfo.append('

......')

}for(vari=pageSize- 10; i<=pageSize; i++) {varli=$('

' +i+ '')

addActive(li, i, pageIndex)

pagingInfo.append(li)if(i== 1) {

pagingInfo.append('

......')

}

}

}else{//当前页面基于所有页面中间位置

//初始化页面基准坐标

if(tmpPageIndex== 0) {

tmpPageIndex=pageIndex

}//当页面索引达到最前或最后时，需要重新设置页面基准坐标

if(tmpPageIndex<=pageIndex- 5 ||tmpPageIndex>=pageIndex+ 5) {

tmpPageIndex=pageIndex

}

pagingInfo.append('

1')

pagingInfo.append('

......')for(vari=tmpPageIndex- 5; i<=tmpPageIndex+ 5; i++) {varli=$(' ' +i+ '')

addActive(li, i, pageIndex)

pagingInfo.append(li)

}

pagingInfo.append('

......')

pagingInfo.append('

' +pageSize+ '')

}varli=$('

»')

pagingInfo.append(li)

}//添加分页按钮焦点

functionaddActive(li, i, pageIndex) {if(i==pageIndex) {

li.addClass('active')

}

}

refreshPageInfo(data,1)

})