/*分页用到的样式*/
.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:虽然不可能是首创,但确实是自己写的东西.