对html或jsp文章列表页面进行js分页，结合使用apache的url Rewrite和jquery

在优化seo时，为了搜索引擎爬虫可以继续抓取分页内容，而分页数据不是数据库存储，所以需要在前台进行分页。通过apache的url Rewrite功能可以模拟类似  list-(##).html对应到list.html?pageNum=$1或list.jsp?pageNum=$1这样美化了url同时又符合seo要求。同时分页导航采取js动态生成

apache url Review配置：

RewriteRule   ^/test/list(-?)([0-9+]{1,}).html      /test/list.jsp?pageNum=$1 [PT,NC,L,QSA]

分页注意点：

首页：当页面设定记录数大于总记录数

尾页：当总记录数不能整除设定记录数

中间页：起始页计算和终点页计算

效果图

list.jsp

<div class="hlist">
<h1>保险学习</h1>
<ul id="tb3_dp_1">
<li><a href="/test1.html">tes1</a></li>

<li><a href="/test1.html">tes1</a></li>
......
</ul>
</div>

list.js

<script>
     jQuery(document).ready(function(){
    	 var pageSize = 10;//每页10条
    	 var pageNum = '<%=request.getParameter("pageNum")%>'+"";//获取参数
         var url = '/test/list&html';//前半部分为apache下的文件目录，后半部是相应文件在apache下的后缀如^/test/list(-?)([0-9+]{1,}).html 即html
         var pageNumMax = 5;//每页显示导航页码最大为10
         var items = jQuery('#tb3_dp_1 li');//需要处理的对象
    	 htmlPageSplit(pageSize,pageNum,url,pageNumMax,items);
     });


//文章 分页
function htmlPageSplit(pageSize,pageNum,url,pageNumMax,items){
    var recordTotal = -1;//总记录数 若为-1 则计算总数
    pageSize = isNaN(pageSize) || pageSize<1 ? 10 : parseInt(pageSize);//默认为每页10条记录
    pageNum =  isNaN(pageNum) || pageNum<1 ? 1 : parseInt(pageNum);//默认第一页
    var pageSizeTmp = pageSize;
    var count = 0;
    var pageTotal =0;//总页数
    
    if(recordTotal == -1){
        count = items.length;
        recordTotal = count;
    } 
    if(recordTotal<=pageSize){
        return;//总数少于pageSize 则不显示分页导航
    }
    pageTotal = getPageTotal(pageSize,recordTotal);//计算总页数
    pageNum = pageNum > pageTotal ? pageTotal : pageNum;
    
    showPageContent(pageNum,pageSize,pageTotal,recordTotal,items);
    
    showPageNav(pageNum,pageTotal,recordTotal,pageNumMax,url,items);
}

//计算总页数
function getPageTotal(pageSize,recordTotal){
    var pageTotal =0;
    if(recordTotal%pageSize==0){
        pageTotal = parseInt(recordTotal/pageSize);
    }else{
        pageTotal = parseInt(recordTotal/pageSize) + 1;
    }
    return pageTotal;
}

//显示该页内容
function showPageContent(pageNum,pageSize,pageTotal,recordTotal,items){
    var start = pageSize*(pageNum-1)+1;

    if(pageNum == pageTotal){
        pageSize = recordTotal%pageSize==0 ? pageSize : (recordTotal-pageSize*(pageNum-1));//计算最后一页 条数
    }
    
    var end = start+pageSize-1;
    
    items.each(function(n,i){
        if(n+1>=start && n+1<=end){
            jQuery(i).css("display","");
        }else{
            jQuery(i).css("display","none");
        }
    });
}

//获取该页面的分页导航要显示的位置
function getPageNavPosition(pageNum,pageNumMax){
    var j =0;
    if(parseInt(pageNum/pageNumMax) > 0 && pageNum%pageNumMax == 0){
        j = parseInt(pageNum/pageNumMax-1)*pageNumMax +1;
    }else if(parseInt(pageNum/pageNumMax) == 0 && pageNum%pageNumMax > 0){
        j = 1;
    }else{
        j = parseInt(pageNum/pageNumMax)*pageNumMax +1;
    }
    return j;
}

//显示分页导航
function showPageNav(pageNum,pageTotal,recordTotal,pageNumMax,url,items){
     var path = "";//列表页目录
     var suffix ="";//列表页文件在apache下的后缀
     var pageNav ="";
     var curPage="";//当前页码
     var curClass="";//当前页样式
     var strTmp ="";
     var navTotal =0;//导航页分页  总页数
     var j=1;
     var k=1;
     var jTmp=0;
     if(path==""){
         path = url.substring(0,url.indexOf("&"));
         suffix ='.'+url.substring(url.indexOf("&")+1);
         suffix = suffix.length==1 ? '.html' :suffix;
     }
     
    if(jQuery(items.parent()).find("div[class='listpage']")){
        jQuery(items.parent()).find("div[class='listpage']").remove();
    }
    pageNav ="<div class='listpage'>共 "+recordTotal+" 篇文章   ";
    
    navTotal = getPageTotal(pageNumMax,pageTotal);
    j = getPageNavPosition(pageNum,pageNumMax);
    k = j+pageNumMax-1;
    if(k>pageTotal){
        k = pageTotal;
    }
    jTmp = j;
    if(jTmp>pageNumMax){
        strTmp="<a href='"+path+"-"+(jTmp-1)+suffix+"'>...</a> "
    }
    if(pageNum!=1&&pageNum==2){
        pageNav += ("<a href='"+path+suffix+"'>首页</a> <a href='"+path+suffix+"'><<</a> "+strTmp);
    }else if(pageNum!=1){
        pageNav += ("<a href='"+path+suffix+"'>首页</a> <a href='"+path+"-"+(pageNum-1)+suffix+"'><<</a> "+strTmp);
    }
    for (;j<=k;j++){
        curPage="";
        if(j != 1){
            curPage="-"+j;
        }
        curClass="";
        if(pageNum == j)
            curClass=" class='on'";
       
        pageNav += ("<a href='"+path+curPage+suffix+"'"+curClass+">"+j+"</a> ");
    }
    if(j<pageTotal){
        pageNav += ("<a href='"+path+"-"+(j)+suffix+"'>...</a> ");
    }
    if(pageNum!=pageTotal){
        pageNav += ("<a href='"+path+"-"+(pageNum+1)+suffix+"'>>></a> <a href='"+path+"-"+pageTotal+suffix+"'>尾页</a> ");
    }
    pageNav += (" </div>");
    jQuery(items.parent()).append(pageNav);
}
 </script>