本文主要是介绍js实现前端分页页码管理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
https://www.cnblogs.com/w-yong/p/6255444.html
本人已经成功实现 分页，有问题欢迎交流，现在做一些补充：一下是我的：
说明一点：当前页和总页数是 用作分页算法的， 当前页和每页多少条数据是用来条用后台查数据的，不要乱
前端页面：
<input hidden="hidden" id="pageSize"><div id="pageBtn"></div>js核心代码，当前页（dqPage）是后台返回的
// 分页算法
function createPage(dqPage,pageCount){var pageSize = $("#pageSize").val();var i = 1;i = parseInt(i);$('#pageBtn').html("");var item="";item += "<ul class='pagination my-pagination'>";if(dqPage == 1){item += "<li><a href='#' style='display: none' aria-label='Previous'><span aria-hidden='true'> < </span></a></li>"; }else{item += "<li><a href='javascript:void(0);' onclick='pageRequest("+(dqPage-1)+","+pageSize+")' aria-label='Previous'><span aria-hidden='true'> < </span></a></li>"; }if (pageCount <= 5 ) {//总页数小于五页，则加载所有页for (i; i <= pageCount; i++) {if (i == dqPage) {item += "<li><a class='disabled'>"+i+"</a></li>"; }else{item += "<li><a href='javascript:void(0);' onclick='pageRequest("+i+","+pageSize+")'>"+i+"</a></li>"; }};}else if (pageCount > 5) {//总页数大于五页，则加载五页if (dqPage < 5) {//当前页小于5，加载1-5页for (i; i <= 5; i++) {if (i == dqPage) {item += "<li><a class='disabled'>"+i+"</a></li>"; }else{item += "<li><a href='javascript:void(0);' onclick='pageRequest("+i+","+pageSize+")' >"+i+"</a></li>"; }};if (dqPage <= pageCount-2) {//最后一页追加“...”代表省略的页item += "<li><span style='background: none'> . . . </span></li>";}}else if (dqPage >= 5) {//当前页大于5页for (i; i <= 2; i++) {//1,2页码始终显示item += "<a href='"+href+i+"' >"+i+"</a>"; }item += "<li><span style='background: none'> . . . </span></li>";//2页码后面用...代替部分未显示的页码if (dqPage+1 == pageCount) {//当前页+1等于总页码for(i = dqPage-1; i <= pageCount; i++){//“...”后面跟三个页码当前页居中显示if (i == dqPage) {item += "<li><a class='disabled'>"+i+"</a></li>"; }else{item += "<li><a href='javascript:void(0);' onclick='pageRequest("+i+","+pageSize+")' >"+i+"</a></li>"; }}}else if (dqPage == pageCount) {//当前页数等于总页数则是最后一页页码显示在最后for(i = dqPage-2; i <= pageCount; i++){//...后面跟三个页码当前页居中显示if (i == dqPage) {item += "<li><a class='disabled'>"+i+"</a></li>"; }else{item += "<li><a href='javascript:void(0);' onclick='pageRequest("+i+","+pageSize+")' >"+i+"</a></li>"; }}}else{//当前页小于总页数，则最后一页后面跟...for(i = dqPage-1; i <= dqPage+1; i++){//dqPage+1页后面...if (i == dqPage) {item += "<li><a class='disabled'>"+i+"</a></li>"; }else{item += "<li><a href='javascript:void(0);' onclick='pageRequest("+i+","+pageSize+")' >"+i+"</a></li>"; }}item += "<li><span style='background: none'> . . . </span></li>";}}}if(dqPage == pageCount){item += "<li><a href='#' style='display: none' aria-label='Previous'><span aria-hidden='true'> > </span></a></li>"; }else{item += "<li><a href='javascript:void(0);' onclick='pageRequest("+(dqPage+1)+","+pageSize+")' aria-label='Previous'><span aria-hidden='true'> > </span></a></li>"; }item += "<li>";item +="<div class='btn-group' role='group'>";item +="<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>10条/页</button>";item += "<ul class='dropdown-menu'>";item += "<li><a href='javascript:void(0);' onclick='pageRequest("+1+","+10+")'>10条</a></li>";item += "<li><a href='javascript:void(0);' onclick='pageRequest("+1+","+20+")'>20条</a></li>";item += "<li><a href='javascript:void(0);' onclick='pageRequest("+1+","+30+")'>30条</a></li>";item += "<li><a href='javascript:void(0);' onclick='pageRequest("+1+","+40+")'>40条</a></li>";item += "<li><a href='javascript:void(0);' onclick='pageRequest("+1+","+50+")'>50条</a></li>";item += "</ul>";item += "</div>";item += "</li>";item +="<li>跳至</li>";item +="<li><input type='text' id='selectIndex' class='form-control page-number' placeholder='5'>页<input type='button' style='background: none' onclick='toInextPage("+pageSize+","+pageCount+")' value='确定'></li>";item +="<li></li>";item +="</ul>";$('#pageBtn').append(item);
}
这篇关于js实现前端分页页码管理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
