转自; https://www.jianshu.com/p/7ee09b150bdd
<div id="pagination"></div>
body .zl_rank .flex_box #pagination { width: 80vw; height: 16vw; display: flex; align-items: flex-end; justify-content: center; } body .zl_rank .flex_box #pagination div { padding: 5px; float: left; list-style-type: none; font-size: 20px; color: #8080FF; } body .zl_rank .flex_box #pagination span { float: left; font-size: 26px; vertical-align: middle; color: #8080FF; } body .zl_rank .flex_box #pagination #active { color: black; }
var pageOptions = { pageTotal: 1, //总页码 curPage: 1, //当前页码 paginationId: '' }; dynamicPagingFunc(pageOptions); function dynamicPagingFunc(pageOptions) { var pageTotal = pageOptions.pageTotal || 1; var curPage = pageOptions.curPage || 1; var doc = document; var paginationId = doc.getElementById('' + pageOptions.paginationId + '') || doc.getElementById('pagination'); var html = ''; if(curPage > pageTotal) { curPage = 1; } /*总页数小于5,全部显示*/ if(pageTotal <= 5) { html = appendItem(pageTotal, curPage, html); paginationId.innerHTML = html; } /*总页数大于5时,要分析当前页*/ if(pageTotal > 5) { if(curPage <= 4) { html = appendItem(pageTotal, curPage, html); paginationId.innerHTML = html; } else if(curPage > 4) { html = appendItem(pageTotal, curPage, html); paginationId.innerHTML = html; } } $("#pagination div").on('click', function() { var pageIndex = parseInt($(this).html()); console.log(pageIndex); pageOptions.curPage = pageIndex || 1; dynamicPagingFunc(pageOptions); console.log(pageOptions + "---" + search_name_l); GetPlayerList(search_name_l, pageIndex, 12) }) } function appendItem(pageTotal, curPage, html) { // console.log("pageTotal:" + pageTotal + "\n" + "curPage" + curPage + "\n" + "html" + html) var starPage = 0; var endPage = 0; html += '<span href="#" id="prevBtn"><</span>'; if(pageTotal <= 5) { starPage = 1; endPage = pageTotal; } else if(pageTotal > 5 && curPage <= 4) { starPage = 1; endPage = 4; if(curPage == 4) { endPage = 5; } } else { if(pageTotal == curPage) { starPage = curPage - 3; endPage = curPage; } else { starPage = curPage - 2; endPage = curPage + 1; } html += '<div id="first">1</div><span>...</span>'; } for(let i = starPage; i <= endPage; i++) { console.log(i + '\n' + endPage) console.log(i == endPage) if(i == curPage) { html += '<div id="active">' + i + '</div>'; } else { html += '<div>' + i + '</div>'; } } if(pageTotal <= 5) { html += '<span href="#" id="nextBtn">></span>'; } else { if(curPage < pageTotal - 2) { html += '<span>...</span>'; } if(curPage <= pageTotal - 2) { html += '<div>' + pageTotal + '</div>'; } html += '<span href="#" id="nextBtn">></span>'; } return html; }