分页导航工具条

最新推荐文章于 2021-09-18 22:16:58 发布

boolean2011

最新推荐文章于 2021-09-18 22:16:58 发布

阅读量414

点赞数

文章标签：工具 html div border function jsp

本文链接：https://blog.csdn.net/boolean2011/article/details/7068527

版权

分页导航工具条

分页目的是提高查询数据的反应速度。分页导航，其目的是方便用户浏览，一般都提供“上一页”、“下一页”、“至首页”、“至尾页”以及当前页相邻页的按钮。现在使用Javascript制作一个工具条，如图：

由上可见分页的导航有以下特点：
1.显示11个页数
2.显示前两页和后两页页数
3.显示上一页和下一页按钮
实现方式：
1.如果少于或等于11页，显示所有页数
2.如果大于11页,又分为以下三种情况
如果(当前页-1)<=5，显示前面9个页数+…+后两页
如：1,2,3,4,5,6,7,8,9…N-1,N
如果(最大页-当前页)<=6,显示前两页+…+最后9个页数,
如：1,2…N-8,N-7,N-6{…}N
如果不是以上两种情况，显示:前两页+…+当前页与其前后三页+…+最后两面
如：1,2…n-3,n-2,n-1,n,n+1,n+2,n+3…N-1,N
完整的HTML代码如下：
<html>
<head>
<script language="javascript">
function pagination(current,total){
varHTML="";
varseparator="...";
if(total<=11){
if(total==0)return;
//生成上一页按钮
if(current==1){
HTML="<spanclass='disabled'>◄</span>";
}else{
HTML="<a href='#'οnclick=topage("+(current-1)+")>◄</a>";
}
//生成中间按钮
HTML+=this.getMidHTML(1,total,current);
//生成下一页按钮
if(current==total){
HTML+="<spanclass='disabled'>►</span>";
}else{
HTML+="<a href='#'οnclick=topage("+(current+1)+")>►</a>";
}
}else{
if(current-1<=5){
HTML=this.getPreHTML(current,total);
HTML+=this.getMidHTML(3,9,current);
HTML+=separator;
HTML+=this.getLastHTML(current,total);
}elseif(total-current<=6){
HTML=this.getPreHTML(current,total);
HTML+=separator;
HTML+=this.getMidHTML(total-8,total-2,current);
HTML+=this.getLastHTML(current,total);
}else{
HTML=this.getPreHTML(current,total);
HTML+=separator;
HTML+=this.getMidHTML(current-3,current+3,current);
HTML+=separator;
HTML+=this.getLastHTML(current,total);
}
}
this.show=HTML;
}
pagination.prototype.getPreHTML=function(current,total){//生成前三个按钮，1,2和上一页按钮
varhtml="";
if(current==1){
html="<spanclass='disabled'>◄</span>";
html+="<spanclass='current'>1</span>";
}else{
html="<a href='#'οnclick=topage("+(current-1)+")>◄</a>";
html+="<a href='#'οnclick=topage(1)>1</a>";
}
if(current==2){
html+="<spanclass='current'>2</span>";
}else{
html+="<a href='#'οnclick=topage(2)>2</a>";
}
returnhtml;
}
pagination.prototype.getMidHTML=function(first,last,current){
varhtml="";
for(vari=first;i<=last;i++){
if(i==current){
html+="<spanclass='current'>"+current+"</span>";
}else{
html+="<a href='#'οnclick=topage("+i+")>"+i+"</a>";
}
}
returnhtml;
}
pagination.prototype.getLastHTML=function(current,total){
//生成三个按钮，最后两页和下一页按钮
varhtml="";//不可不初始化,否则在字符串相加时出现undefined
if(current==total-1){
html="<spanclass='current'>"+(total-1)+"</span>";
}else{
html="<a href='#'οnclick=topage("+(total-1)+")>"+(total-1)+"</a>";
}
if(current==total){//生成最后二个按钮
html+="<spanclass='current'>"+total+"</span>";
html+="<spanclass='disabled'>►</span>";
}else{
html+="<a href='#'οnclick=topage("+total+")>"+total+"</a>";
html+="<a href='#'οnclick=topage("+(current+1)+")>►</a>";
}
returnhtml;
}
function test()//测试以上代码的正确性
{
var hear=document.getElementById("page");
for(vari=1;i<=11;i++){
for(varj=1;j<=i;j++){
var page=newpagination(j,i);
vardiv=document.createElement("div");
vardiv2=document.createElement("div");
div2.innerHTML="<br>";
hear.appendChild(div2);
hear.appendChild(div);
div.innerHTML=page.show;
}
}
for(vari=11;i<=25;i++){
for(varj=1;j<=i;j++){
var page=newpagination(j,i);
vardiv=document.createElement("div");
vardiv2=document.createElement("div");
div2.innerHTML="<br>";
hear.appendChild(div2);
hear.appendChild(div);
div.innerHTML=page.show;
}
}
}
</script>
<title>Pagination</title>
<style type="text/css">

div.pagination {
font-size:12;
font_face:arial;
font-color:#ffffff;

padding:3px;
margin:3px;
text-align:center;
}

div.pagination a {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid #9aafe5;

text-decoration: none;
color:#2e6ab1;
}
div.pagination a:hover, div.pagination a:active {
border: 1pxsolid #2b66a5;
color:#000;
background-color: lightyellow;
}
div.pagination span.current {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid navy;
font-weight:bold;
background-color: #2e6ab1;
color:#FFF;
}
div.pagination span.disabled {
padding: 2px5px 2px 5px;
margin-right: 2px;
border: 1pxsolid #929292;
color:#929292;
}
</style>
</head>
<body>
<div class="pagination"id="page">
<div class="pagination">
<spanclass="disabled">◄</span>
<spanclass="current">1</span>
<ahref="#?page">2</a>
<ahref="#?page=3">3</a>
<ahref="#?page=4">4</a>
<ahref="#?page=5">5</a>
<ahref="#?page=6">6</a>
<ahref="#?page=7">7</a>
...
<ahref="#?page=199">199</a>
<ahref="#?page=200">200</a>
<ahref="#?page=2">►</a>
</div>
<input type="button" οnclick="test()"value='生成测试分页工具条'/>
</body>
</html>

在JSP页面的使用
   先在JSP页面中加一个class为pagination的DIV
       <div id="navigation" class="pagination">
      </div>
   然后在body加载(oncload)的时候，执行
    functioncreate(){
       varcurrent=<%=current%>;
       vartotal=<%=total%>;
       var div=document.getElementByIdx("navigation");
       var navi=newpagination(current,total);
      div.innerHTML=navi.show;
    }
   上面的current和total表示当前页和总页数，这两个变量可以是JSP中的两个Java声明的变量。

boolean2011

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
分页导航工具条

分页导航工具条分页目的是提高查询数据的反应速度。分页导航，其目的是方便用户浏览，一般都提供“上一页”、“下一页”、“至首页”、“至尾页”以及当前页相邻页的按钮。现在使用Javascript制作一个工具条，如图：由上可见分页的导航有以下特点：1.显示11个页数2.显示前两页和后两页页数3.显示上一页和下一页按钮实现方式：1.如果少于或等于11页，显示所有页数
复制链接

扫一扫