js分页｛此贴转载的地方忘啦。不好…-优快云博客

本文链接：https://blog.youkuaiyun.com/lsfhack/article/details/69664395

本文介绍了一个基于JavaScript的分页组件实现方法，通过定义一个名为showPages的类来处理页面导航逻辑，包括初始化属性、从URL获取当前页数、验证页数有效性及生成不同模式的分页链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>登录</title>
 <script language="JavaScript" type="text/javascript">

 function showPages(name) { //初始化属性
 this.name = name; //对象名称
 this.page = 1; //当前页数
 this.pageCount = 10; //总页数
 this.argName = 'page'; //参数名
 this.showTimes = 1; //打印次数
 }
 showPages.prototype.getPage = function() { //丛url获得当前页数,如果变量重复只获取最后一个
 var args = location.search;
 var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
 var chk = args.match(reg);
 this.page = RegExp.$1;
 }
 showPages.prototype.checkPages = function() { //进行当前页数和总页数的验证
 if (isNaN(parseInt(this.page)))
 this.page = 1;
 if (isNaN(parseInt(this.pageCount)))
 this.pageCount = 1;
 if (this.page < 1)
 this.page = 1;
 if (this.pageCount < 1)
 this.pageCount = 1;
 if (this.page > this.pageCount)
 this.page = this.pageCount;
 this.page = parseInt(this.page);
 this.pageCount = parseInt(this.pageCount);
 }
 showPages.prototype.createHtml = function(mode) { //生成html代码
 var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
 if (mode == '' || typeof (mode) == 'undefined')
 mode = 0;
 switch (mode) {
 case 0: //模式1 (页数,首页,前页,后页,尾页)
 strHtml += 'Pages: ' + this.page + ' / '
 + this.pageCount + '';
 strHtml += '';
 if (prevPage < 1) {
 strHtml += '«';
 strHtml += '';
 } else {
 strHtml += '<a href="javascript:' + this.name + '.toPage(1);">«</a>';
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + prevPage
 + ');"></a>';
 }
 for ( var i = 1; i <= this.pageCount; i++) {
 if (i > 0) {
 if (i == this.page) {
 strHtml += '[' + i
 + ']';
 } else {
 strHtml += '<a href="javascript:' + this.name
 + '.toPage(' + i + ');">[' + i + ']</a>';
 }
 }
 }
 if (nextPage > this.pageCount) {
 strHtml += '';
 strHtml += '»';
 } else {
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + nextPage
 + ');"></a>';
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + this.pageCount
 + ');">»</a>';
 }
 strHtml += ' ';
 break;
 case 1: //模式1 (10页缩略,首页,前页,后页,尾页)
 strHtml += 'Pages: ' + this.page + ' / '
 + this.pageCount + '';
 strHtml += '';
 if (prevPage < 1) {
 strHtml += '«';
 strHtml += '';
 } else {
 strHtml += '<a href="javascript:' + this.name + '.toPage(1);">«</a>';
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + prevPage
 + ');"></a>';
 }
 if (this.page % 10 == 0) {
 var startPage = this.page - 9;
 } else {
 var startPage = this.page - this.page % 10 + 1;
 }
 if (startPage > 10)
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + (startPage - 1)
 + ');">...</a>';
 for ( var i = startPage; i < startPage + 10; i++) {
 if (i > this.pageCount)
 break;
 if (i == this.page) {
 strHtml += '[' + i
 + ']';
 } else {
 strHtml += '<a href="javascript:' + this.name + '.toPage('
 + i + ');">[' + i + ']</a>';
 }
 }
 if (this.pageCount >= startPage + 10)
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + (startPage + 10)
 + ');">...</a>';
 if (nextPage > this.pageCount) {
 strHtml += '';
 strHtml += '»';
 } else {
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + nextPage
 + ');"></a>';
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + this.pageCount
 + ');">»</a>';
 }
 strHtml += ' ';
 break;
 case 2: //模式2 (前后缩略,页数,首页,前页,后页,尾页)
 strHtml += 'Pages: ' + this.page + ' / '
 + this.pageCount + '';
 strHtml += '';
 if (prevPage < 1) {
 strHtml += '«';
 strHtml += '';
 } else {
 strHtml += '<a href="javascript:' + this.name + '.toPage(1);">«</a>';
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + prevPage
 + ');"></a>';
 }
 if (this.page != 1)
 strHtml += '<a href="javascript:' + this.name + '.toPage(1);">[1]</a>';
 if (this.page >= 5)
 strHtml += '...';
 if (this.pageCount > this.page + 2) {
 var endPage = this.page + 2;
 } else {
 var endPage = this.pageCount;
 }
 for ( var i = this.page - 2; i <= endPage; i++) {
 if (i > 0) {
 if (i == this.page) {
 strHtml += '[' + i
 + ']';
 } else {
 if (i != 1 && i != this.pageCount) {
 strHtml += '<a href="javascript:' + this.name
 + '.toPage(' + i + ');">[' + i
 + ']</a>';
 }
 }
 }
 }
 if (this.page + 3 < this.pageCount)
 strHtml += '...';
 if (this.page != this.pageCount)
 strHtml += '<a href="javascript:' + this.name + '.toPage('
 + this.pageCount + ');">[' + this.pageCount
 + ']</a>';
 if (nextPage > this.pageCount) {
 strHtml += '';
 strHtml += '»';
 } else {
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + nextPage
 + ');"></a>';
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + this.pageCount
 + ');">»</a>';
 }
 strHtml += ' ';
 break;
 case 3: //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
 strHtml += 'Pages: ' + this.page + ' / '
 + this.pageCount + '';
 strHtml += '';
 if (prevPage < 1) {
 strHtml += '9';
 strHtml += '7';
 } else {
 strHtml += '<a href="javascript:' + this.name + '.toPage(1);">9</a>';
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + prevPage
 + ');">7</a>';
 }
 if (nextPage > this.pageCount) {
 strHtml += '8';
 strHtml += ':';
 } else {
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + nextPage
 + ');">8</a>';
 strHtml += '<a href="javascript:'
 + this.name + '.toPage(' + this.pageCount
 + ');">:</a>';
 }
 strHtml += ' ';
 break;
 case 4: //模式4 (下拉框)
 if (this.pageCount < 1) {
 strHtml += '<select name="toPage" disabled>';
 strHtml += '<option value="0">No Pages</option>';
 } else {
 var chkSelect;
 strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">';
 for ( var i = 1; i <= this.pageCount; i++) {
 if (this.page == i)
 chkSelect = ' selected="selected"';
 else
 chkSelect = '';
 strHtml += '<option value="' + i + '"' + chkSelect
 + '>Pages: ' + i + ' / ' + this.pageCount
 + '</option>';
 }
 }
 strHtml += '</select>';
 break;
 case 5: //模式5 (输入框)
 strHtml += '';
 if (this.pageCount < 1) {
 strHtml += '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled">';
 strHtml += '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled"></option>';
 } else {
 strHtml += '<input type="text" value="Input Page:" class="ititle" readonly="readonly">';
 strHtml += '<input type="text" id="pageInput'
 + this.showTimes
 + '" value="'
 + this.page
 + '" class="itext" title="Input page" onkeypress="return '
 + this.name
 + '.formatInputPage(event);" onfocus="this.select()">';
 strHtml += '<input type="text" value=" / ' + this.pageCount + '" class="icount" readonly="readonly">';
 strHtml += '<input type="button" name="go" value="GO" class="ibutton" onclick="'
 + this.name
 + '.toPage(document.getElementByIdx_x(\'pageInput'
 + this.showTimes + '\').value);"></option>';
 }
 strHtml += '';
 break;
 default:
 strHtml = 'Javascript showPage Error: not find mode ' + mode;
 break;
 }
 return strHtml;
 }
 showPages.prototype.createUrl = function(page) { //生成页面跳转url
 if (isNaN(parseInt(page)))
 page = 1;
 if (page < 1)
 page = 1;
 if (page > this.pageCount)
 page = this.pageCount;
 var url = location.protocol + '//' + location.host + location.pathname;
 var args = location.search;
 var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
 args = args.replace(reg, '$1');
 if (args == '' || args == null) {
 args += '?' + this.argName + '=' + page;
 } else if (args.substr(args.length - 1, 1) == '?'
 || args.substr(args.length - 1, 1) == '&') {
 args += this.argName + '=' + page;
 } else {
 args += '&' + this.argName + '=' + page;
 }
 return url + args;
 }
 showPages.prototype.toPage = function(page) { //页面跳转
 var turnTo = 1;
 if (typeof (page) == 'object') {
 turnTo = page.options[page.selectedIndex].value;
 } else {
 turnTo = page;
 }
 self.location.href = this.createUrl(turnTo);
 }
 showPages.prototype.printHtml = function(mode) { //显示html代码
 this.getPage();
 this.checkPages();
 this.showTimes += 1;
 document.write('<div id="pages_' + this.name + '_' + this.showTimes
 + '" class="pages"></div>');
 document.getElementByIdx_x('pages_' + this.name + '_' + this.showTimes).innerHTML = this
 .createHtml(mode);
 }
 showPages.prototype.formatInputPage = function(e) { //限定输入页数格式
 var ie = navigator.appName == "Microsoft Internet Explorer" ? true
 : false;
 if (!ie)
 var key = e.which;
 else
 var key = event.keyCode;
 if (key == 8 || key == 46 || (key >= 48 && key <= 57))
 return true;
 return false;
 }
 //-->
</script>
 <style type="text/css">

.pages {
 color: red;
 cursor: default;
 font-size: 10px;
 font-family: Tahoma, Verdana;
 padding: 3px 0px 3px 0px;
}

.pages .count,.pages .number,.pages .arrow {
 color: #000000;
 font-size: 10px;
 background-color: #F7F7F7;
 border: 1px solid #CCCCCC;
}

.pages .count {
 background:#E6EFFB;
 font-weight: bold;
 border-right: none;
 padding: 2px 10px 1px 10px;
}

.pages .number {
 background:#E6EFFB;
 font-weight: normal;
 padding: 2px 10px 1px 10px;
}

.pages .number a,.pages .number span {
 font-size: 10px;
}

.pages .number span {
 color: red;
 margin: 0px 3px 0px 3px;
}

.pages .number a {
 color: #000000;
 text-decoration: none;
}

.pages .number a:hover {
 color: #0000ff;
}

.pages .arrow {
 font-weight: normal;
 padding: 0px 5px 0px 5px;
}

.pages .arrow a,.pages .arrow span {
 font-size: 10px;
 font-family: Webdings;
}

.pages .arrow span {
 color: #999999;
 margin: 0px 5px 0px 5px;
}

.pages .arrow a {
 color: #000000;
 text-decoration: none;
}

.pages .arrow a:hover {
 color: #0000ff;
}

.pages select,.pages input {
 color: #000000;
 font-size: 10px;
 font-family: Tahoma, Verdana;
}

.pages .input input.ititle,.pages .input input.itext,.pages .input input.icount
 {
 color: red;
 font-weight: bold;
 background-color: #F7F7F7;
 border: 1px solid #CCCCCC;
}

.pages .input input.ititle {
 width: 70px;
 text-align: right;
 border-right: none;
}

.pages .input input.itext {
 width: 25px;
 color: #000000;
 text-align: right;
 border-left: none;
 border-right: none;
}

.pages .input input.icount {
 width: 35px;
 text-align: left;
 border-left: none;
}

.pages .input input.ibutton {
 height: 17px;
 color: #FFFFFF;
 font-weight: bold;
 font-family: Verdana;
 background-color: #999999;
 border: 1px solid #666666;
 padding: 0px 0px 2px 1px;
 margin-left: 2px;
 cursor: hand;
}

body {
 font-size: 14px;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.js"></script>
 </head>
 <body>
 <table border="1">
 <s:iterator id="item" value="list">
 <tr>
 <td>
 <s:property value="#item.logTitle"/>
 <s:hidden id="test" value="10"></s:hidden>
 </td>
 </tr>
 </s:iterator>
 <tr>
 <td>
 <script language="JavaScript" type="text/javascript">
 var count = document.getElementByIdx_x("test").value;
 var pg = new showPages('pg');
 pg.pageCount =parseInt(count); // 定义总页数(必要)
 如果是从标签中取出的value一定要先转换成int类型
 pg.printHtml(2);
 </script>
 </td>
 </tr>
 </table>

 </body>
</html>