来自 关于计算机 2019-09-04 19:48 的文章
当前位置: 六合联盟网 > 关于计算机 > 正文

js脚本分页代码分享,JavaScript实现列表分页功能

本文跟大家大饱眼福了7种JS脚本分页样式,相信总有一款是符合你的啊

最近几年写了三个js分页的点子,就算已经有现存的能够用,但照旧想和睦写写,搞搞领会。最后促成的机能是:上一页、第一页、…(上n个页码)、n个页码、…(下n个页码)、最终一页、下一页。n能够是奇数也足以是偶数,一般都爱好取奇数,星石调用的时候传出的参数是5。写的时候,首要注意了以下多少个地方:

赶紧先上海体育地方给我们选取一下------------------运作效果-------------------

 页码等于1时,只展现上一页、第一页、最终一页,且都尚未跳转;
 页码小于等于2时,不要求中间的n个页码;
 页码小于等于n时,展现全数页码,不显得2个“…”;
 2个“…”换页时,换n个页码,假设类似最前头或最终边几页了,则呈现最前方或最前面n个页码。

图片 1

  上边贴出代码,供我们斟酌:

其实作者挺喜欢最后一款的,亲,你啊?

//总页数,当前页数,跳转地址,第一页和最后一页之间显示的页码数量
function pageBar(tp,cp,url,pn){
    var str = ‘<ul class=”page”>';
    if(tp>1 && cp>1){
      var prev = cp-1;
      str += ‘<li><a class=”prev” title=”上一页” href=”javascript:goPage(‘+prev+‘,”+url+‘');”>上一页</a></li> ‘;
    }else{
      str += ‘<li><a class=”prev” title=”上一页” href=”javascript:void(0);”>上一页</a></li> ‘;
    }
    if(tp>1){
      //第一页
      if(cp==1){
        str +=‘<li class=”current”><a href=”javascript:goPage(1,”+url+‘');”>1</a></li> ‘;
      }else{
        str +=‘<li><a href=”javascript:goPage(1,”+url+‘');”>1</a></li> ‘;
      }

      if(tp>2){
        var pnh = Math.floor(pn/2);

        //循环开始页码
        var s = cp-pnh;
        if(s<=1){
          s = 2;
        }

        //循环结束页码
        var e = cp+pnh;
        if(e>=tp){
          e = tp-1;
        }

        if(s<=(1+pnh)){
          if(tp>(pn+2)){
            e = s+(pn-1);
            if(e>=tp){
              e = tp-1;
            }
          }else{
            s = 2;
          }
        }

        if(e>=(tp-pnh)){
          if(tp>(pn+2)){
            s = e-(pn-1);
            if(s<=1){
              s = 2;
            }
          }else{
            e = tp-1;
          }
        }

        if(e<s){
          e = s;
        }

        //第一页后的多页跳转
        if(s>2){
          var sp = cp-pn;
          if(sp<1){
            sp=1;
          }
          str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,”+url+‘');”>…</a></li> ‘;
        }

        for(var i=s;i<=e;i++){
          if(i==cp){
            str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,”+url+‘');”>'+i+‘</a></li> ‘;
          }else{
            str += ‘<li><a href=”javascript:goPage(‘+i+‘,”+url+‘');”>'+i+‘</a></li> ‘;
          }
        }

        //最后一页前的多页跳转
        if(e < (tp-1)){
          var ep = cp+pn;
          if(ep>tp){
            ep=tp;
          }
          str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,”+url+‘');”>…</a></li> ‘;
        }
      }

      //最后一页
      if(cp==tp){
        str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,”+url+‘');”>'+tp+‘</a></li> ‘;
      }else{
        str +=‘<li><a href=”javascript:goPage(‘+tp+‘,”+url+‘');”>'+tp+‘</a></li> ‘;
      }

    }else{
      str +=‘ <li class=”current”><a href=”javascript:void(0);”>1</a></li> ‘;
    }

    if(tp>1 && cp<tp){
      var next = cp+1;
      str += ‘<li><a class=”next” title=”下一页” href=”javascript:goPage(‘+next+‘,”+url+‘');”>下一页</a></li>';
    }else{
      str += ‘<li><a class=”next” title=”下一页” href=”javascript:void(0);”>下一页</a></li>';
    }
    str += ‘</ul>';
    return str;
  }

  //跳转页码,跳转地址
  function goPage(cp,url){
    window.location.href = url+cp;
  }

为大家再享受达成JS脚本分页的代码,直接复制代码,运维就能够,抓紧试试啊

如上所述就是本文的全体内容了,希望我们能够欣赏。

<html>
<head>

<title>7种JS脚本分页代码</title>
<style>
body {font-size: 12px;}

/* Pages Main Tyle */
.pages {
 color: #000000;
 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;
}
/* Page and PageCount Style */
.pages .count {
 font-weight: bold;
 border-right: none;
 padding: 2px 10px 1px 10px;
}
/* Mode 0,1,2 Style (Number) */
.pages .number {
 font-weight: normal;
 padding: 2px 10px 1px 10px;
}
.pages .number a, .pages .number span {
 font-size: 10px;
}
.pages .number span {
 color: #999999;
 margin: 0px 3px 0px 3px;
}
.pages .number a {
 color: #000000;
 text-decoration: none;
}
.pages .number a:hover {
 color: #0000ff;
}
/* Mode 3 Style (Arrow) */
.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;
}
/* Mode 4 Style (Select) */
.pages select, .pages input {
 color: #000000;
 font-size: 10px;
 font-family: Tahoma, Verdana;
}
/* Mode 5 Style (Input) */
.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {
 color: #666666;
 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;
}
</style>
<script language="JavaScript">
<!--


function showPages(name) { //初始化属性
 this.name = name;  //对象名称
 this.page = 1;   //当前页数
 this.pageCount = 1; //总页数
 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 += '<br />';
 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 += '<br />';
 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 += '<br />';
 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 += '<br />';
 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.getElementById('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.getElementById('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>
</head>

<body>
<p>
 <script language="JavaScript">
<!--
var pg = new showPages('pg');
pg.pageCount =12; // 定义总页数(必要)
//pg.argName = 'p'; // 定义参数名(可选,默认为page)

document.write('<br>Show Times: ' + pg.showTimes + ', Mood Default');
pg.printHtml();
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 0');
pg.printHtml(0);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 1');
pg.printHtml(1);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 2');
pg.printHtml(2);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');
pg.printHtml(3);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 4');
pg.printHtml(4);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 5');
pg.printHtml(5);
//-->
 </script>
</p>
</body>
</html>

您可能感兴趣的稿子:

  • js脚本分页代码分享(7种样式)
  • 纯javascript完成分页(三种方法)
  • ANGULA大切诺基JS中利用JQUETucsonY分页控件
  • JSP+EXt2.0完成分页的点子
  • JSP完毕的简易分页示例
  • 应用Jquery+Ajax+Json怎么着达成分页展现附JAVA+JQuery完毕异步分页
  • JSP完成的大致分页呈现效果代码
  • JSP通用分页框架
  • jquery+json实现分页效果
  • jquery分页插件jquery.pagination.js使用方法解析
  • jquery分页插件jquery.pagination.js完结无刷新分页
  • Angular.js与Bootstrap相结合贯彻表格分页代码
  • js达成ajax分页完整实例
  • js多效果与利益分页组件layPage使用办法详解
  • 凭仗Vue.js的表格分页组件
  • 纯JS前端完结分页代码

如上正是以上便是为大家享用的js脚本分页代码,希望大家能够欣赏。

你恐怕感兴趣的稿子:

  • JavaScript达成列表分页成效特效
  • 纯javascript达成分页(二种格局)
  • ANGULA中华VJS中运用JQUE哈弗Y分页控件
  • JSP+EXt2.0贯彻分页的办法
  • JSP完毕的粗略分页示例
  • 接纳Jquery+Ajax+Json怎么样贯彻分页显示附JAVA+JQuery完结异步分页
  • JSP达成的轻便分页突显效果代码
  • JSP通用分页框架
  • jquery+json达成分页效果
  • jquery分页插件jquery.pagination.js使用方法解析
  • jquery分页插件jquery.pagination.js完毕无刷新分页
  • Angular.js与Bootstrap相结合贯彻表格分页代码
  • js达成ajax分页完整实例
  • js多职能分页组件layPage使用方法详解
  • 据说Vue.js的报表分页组件
  • 纯JS前端达成分页代码

本文由六合联盟网发布于关于计算机,转载请注明出处:js脚本分页代码分享,JavaScript实现列表分页功能

关键词: