JS显示分页栏 个人的aspnetpager替代物-测试中

/*分页用到的样式*/

.pageareastyle a{ text-align:center; padding:4px 7px 4px 7px; margin:0px 5px 0px 5px; height:20px; line-height:20px; border:1px solid #9FBDDD; background-color:#D9E8EE; font-size:12px; color:#363636;}

.pageareastyle a{ text-decoration:none; color:#000000; }
.pageareastyle a:hover{ text-decoration:underline; color:#990000;}
.pageareastyle{ text-align:center; width:800px; height:22px; margin:1px auto 2px auto; float:right; padding-right:20px;}/*分页区的样式名称*/
.pageareastyle b{ text-align:center; padding:4px 7px 4px 7px; margin:0px 5px 0px 5px; height:20px; border:1px solid #FF0000; line-height:20px; font-size:12px; color:#363636;}

.pageareastyle span{ text-align:center; padding:4px 7px 4px 7px; margin:0px 5px 0px 5px; height:20px; border:1px solid #9FBDDD;line-height:20px; font-size:12px; color:#363636;}

/*样式结束*/

/*以下开始YangXC_自定义的分页方法*/
/*2011-10-28 11:20:00*/
/*CSS文件中需要pagestyle,pageareastyle,nowpagestyle  3个css样式*/
/*使用时在页面调用Paging()方法,传入当前页码,每页显示数量,列表记录总数,URL中的分页键名称*/
/*页面中需要有一个id为pageArea的div处于需要显示分页的地方*/

/*示例:

使用以下方法是以指定的格式为模型构建URL,当声明了url之后必须带上pageKey  调用的方法里面必须再调用dianjifanye(id)方法进行重分页

<div id="pageArea"></div>
<script type="text/javascript">
dianjifanye(1);
function dianji(id)
{dianjifanye(id); }
function dianjifanye(id) {
Paging({ "page": id, "pagesize": 10, "contentcount": 1000, "url": "javascript:dianji(%page%);", "pageKey": "%page%" });
}


或者  使用一下方法是使用location.href为模型构建URL

<div id="pageArea"></div>
<script type="text/javascript">
Paging({ "page": <%=page%>, "pagesize": 10, "contentcount": 1000});
</script>
*/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/

var maxShowPageSize = 10;//最多显示多少页
var pagestyle="pagestyle";//显示页的样式名称
var pageAreaStyle="pageareastyle";//分页区的样式名称
var nowpagestyle="nowpagestyle";//当前页码的样式名称
//page, pagesize, contentcount, pageKey
//分页,page:当前页码  pagesize:每页显示多少条内容  contentcount:总共有多少记录  pageKey:URL中用于分页的键名称
function Paging(parameter) {
    var pageHTML="<div class='"+pageAreaStyle+"'>";
    var pagecount=parameter.contentcount/parameter.pagesize;//分页总数  
    if(pagecount>parseInt(pagecount)){pagecount=parseInt(pagecount)+1;}//2011-11-7更新计算分页数量的bug
    pageHTML+="<a href='"+GetUrl(parameter,1)+"'>首页</a>";//2011-11-7更新添加第一页和最后一页的链接
    if (parameter.page == 1)//如果是第一页则没有上一页
    {
        pageHTML+="<span class='"+pagestyle+"'>上一页</span>";
    }
    else {
        pageHTML+="<a href='"+GetUrl(parameter,parameter.page-1)+"'>上一页</a>"
    }
    var startIndex;
    var endIndex;
    if(pagecount<=maxShowPageSize)//如果当前分页数量小于最多显示的页数
    {
        startIndex = 1;
        endIndex = pagecount;        
    }
    else//如果当前分页数量大于最多显示的页数
    {
        if ((pagecount - parameter.page) < maxShowPageSize)//如果当前页码是在最后maxShowPageSize条之中
        {
            startIndex=(pagecount - maxShowPageSize) + 1;
            endIndex=pagecount;
        }
        else if (parameter.page < (maxShowPageSize / 2))//如果当前页码靠前
        {
            startIndex = 1;
            endIndex = maxShowPageSize;
        }
        else//分页中间段例如当前第9页,只显示7页则为  显示6 7 8 9 10 11 12的链接
        {
            startIndex=parseInt(parameter.page - (maxShowPageSize / 2)) + 1;
            endIndex = parseInt(parameter.page + (maxShowPageSize / 2));
        }
    }
    pageHTML += RepeatAddPage(startIndex, parameter.page, endIndex, parameter);
    if (parameter.page >= pagecount)
    {
        pageHTML+="<span class='"+pagestyle+"'>下一页</span>";
    }
    else {
        pageHTML += "<a href='" + GetUrl(parameter, parameter.page + 1) + "'>下一页</a>";
    }
    pageHTML+="<a href='"+GetUrl(parameter,pagecount)+"'>尾页</a>";//2011-11-7更新添加第一页和最后一页的链接
    pageHTML+="</div>";
    document.getElementById("pageArea").innerHTML=pageHTML;
}

//添加页码的html代码 startIndex起始的页码,pageIndex当前的页码,endIndex结束的页码,pageKey页码的Url参数名
function RepeatAddPage(startIndex,pageIndex,endIndex,parameter)
{
    var pageHTML="";//初始化html代码
    for(var i=startIndex;i<=endIndex;i++)//从页码起点开始循环至结束
    {
        if(i!=pageIndex)//如果不是当前页的页码
        {
            pageHTML+="<a href='"+GetUrl(parameter,i)+"'>"+i+"</a>";//带链接的html代码
        }
        else
        {
            pageHTML+="<b class='"+nowpagestyle+"'>"+i+"</b>";//不带链接的html代码
        }
    }
    return pageHTML;//返回页码的html代码
}
//返回处理后的URL   pageKey页码的Url参数名,value第几页
function GetUrl(parameter, value) {
    var url;
    if (parameter.url != null) {
        url = parameter.url.replace(parameter.pageKey, value);
    }
    else {
        var locaurl = location.href;
        var index = locaurl.indexOf("?"); //获取url参数
        if (index == -1) {//如果地址没有参数
            url = locaurl + "?page=" + value;
        }
        else {//如果有参数
            var pageindex = locaurl.indexOf("page=");
            var pindex = locaurl.indexOf("&");
            if (pindex == -1 && pageindex == -1) {
                url = locaurl + "page=" + value;
            }
            else {
                if (pageindex == -1) {//如果地址没有page参数
                    url = locaurl + "&page=" + value;
                }
                else {//如果地址有page参数
                    url = locaurl.replace(/(page=)\d*/g, "page=" + value);
                }
            }
        }
    }
    return url;
}

/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/
/*以上分页方法结束*/

/*以下html代码*/

            <div class="content8" id="pageArea"></div>
            <script type="text/javascript">            
            function dianjifanye(id) {
                Paging({ "page": id, "pagesize": 10, "contentcount": <%=pagecount%>, "url": "javascript:dianji(%page%);", "pageKey": "%page%" });
            }
            dianjifanye(1);
            function dianji(id)
            {
                dianjifanye(id);
            /*    $.post("function/getcomment.html",{"index":id,"size":"10"},function(nr,zt){
                    if(zt=="success")
                    {
                        $("#commentcontent").html(nr);
                        location.href="index.html#chead";
                    }
                });  无视吧, ajax加载评论的 */
            }
        </script>

最后效果

PS:虽然不可能是首创,但确实是自己写的东西.