下面是这个插件在项目中必须满足的几个功能要求 ： 1、页数不确定，根据记录条数和每页显示记录数自动生成 2、样式不确定，必须可以根据页面需要应用不同样式 3

分享到：

下面是这个插件在项目中必须满足的几个功能要求：

1、页数不确定，根据记录条数和每页显示记录数自动生成

2、样式

不确定，必须可以根据页面需要应用不同样式

3、必须可以自动缩略多余的页码，比如总共有100页，当浏览第50页时，可以省略1-49及51-100之间的部分页码，并且这个延伸显示的页码数量可

以由自己设定

4、提供“上一页”“下一页”按钮，并且可以自己设定对应的值或图形

5、记录为空时，隐藏页栏，显示友好的空记录信息

6、属于附加要求：由于该空间可能用

于不提供AJAX/JSON数据的页面或者由于配合SEO需要，同时兼顾POST+AJAX方式和GET直接请求页面（如.aspx）两种方式，并且逻辑和输出尽量分离以便日后需要直接HTML输出时（SEO需要），由js转换

为C#语言。

7、同一页面中可以多次重复调用，互不影响，并兼容IE/FF

这里先列出完成以上几点必须提供的API，然后我会把源代码全部发上来：

调用：ShowPageBar

([containerId] ,[url] , [attr]);

解释：
参数名称 类型 说明
containerId 字符串 提供装载页码栏的容器标签的客户端ID（用于定位，如div）
url 字符

串 如果使用GET方法请求页面（最普通的页码栏换页方式），提供需要请求的URL（如果为POST，此url可为空值，有页面指定，稍后源代码中可见）
attr hashtable 页码栏参数，为

hash数据具体包括如下表“表二”

表二 attr hash参数说明：
[attr]参数名称 类型 说明
style 字符串 css样式，默认”technorati”等，可自己设置（我的示例中

使用了网上提供的一套Web2.0的样式，大家也可以自己定制）
totalCount 整数 总记录条数
pageCount 整数 没页显示记录条数，默认为20
showPageNumber 整数

缩略显示页码的阀值（如页码为50，则相邻只显示50 – showPageNumber到50 +showPageNumber的页码），默认为3
currentPageIndex 整数 当前页码
onclick 字符串 页码

单击事件（如果采用单击事件，并且包含“return false”字段，则url将被忽略），插件会把“{pageindex}”自动替换为当前页码
barMark 字符串 数据显示区域的Mark标签（<a

name=[ barMark]></a>），备用
noRecordTip 字符串 如果没有记录，显示的友好提示
preWord 字符造 “上一页”按钮显示的字样
nextWord 字符串 “

下一页”按钮显示的字样

分享到：

Pages: 1

分享到：

jQuery源代码如下：

function ShowPageBar(containerId , url , attr) { var style = (attr["style"] == null) "technorati" : attr["style"];//class样式 var totalCount =( attr["totalCount"]==null || attr["totalCount"] == 0) 0 : attr["totalCount"];;//parseInt()//总记录条数 var pageCount = (attr["pageCount"] == null || attr["pageCount"] == 0) 20 : attr["pageCount"];//attr["pageCount"];//每页记录数 var showPageNumber = (attr ["showPageNumber"] == null || attr["showPageNumber"] == 0) 20 : attr["showPageNumber"];//attr["showPageNumber"];//显示页码数量 var currentPageIndex = attr ["currentPageIndex"];//当前页 var onclick = attr["onclick"];//onclick参数，如果包含“return false”，则连接转为跳到barMark（暂留接口，其实return false后一般情况下href将失 效。） var barMark = attr["mark"];//onclick后跳转到的标签 var noRecordTip = attr["noRecordTip"];//没有记录提示（支持HTML） var preWord = (attr["preWord"] == null) " < " : attr["preWord"];//上一条记录文字，默认为“ < ” var nextWord = (attr["nextWord"] == null) " > " : attr["nextWord"];//下一条 记录文字，默认为“ > ” //输出设置 var barID = containerId + "_pageBar"; //var barDiv = $("#"+barID); //添加PageBar层 $("#"+containerId).html(" "); //输出设置 结束 //如果没有记录，返回空记录提示 if(totalCount==0) { $("#"+barID).html (noRecordTip); return false; } pageCount = (pageCount == null || pageCount == 0) 20 : pageCount;//每页显示记录数 var totalPage = parseInt ((totalCount-1) / pageCount) +1;//总页数 showPageNumber = (showPageNumber == null || showPageNumber == 0) 3 : showPageNumber; currentPageIndex = (currentPageIndex == null || currentPageIndex <= 0 || currentPageIndex > totalPage) 1 : currentPageIndex; var backPageStyle = (currentPageIndex <= 1) "disabled" : ""; var nextPageStyle = (currentPageIndex >= totalPage) "disabled" : ""; var firstDisplayPageEnd = 0;//从第1页显示到xx页 var bodyDisplayPageStart = 0;//当前页临近最左页码 var bodyDisplayPageEnd = 0;//当前页临近最右页码 var endDisplayPageStart = 0;//从第xx页显示到最后一页 //设定 bodyDisplayPageStart bodyDisplayPageStart = (currentPageIndex - showPageNumber <= 1) 1 : currentPageIndex - showPageNumber; // (ViewData.pageIndex - ViewData.showPageNumber <= ViewData.showPageNumber) ViewData.showPageNumber + 1 : ViewData.pageIndex - ViewData.showPageNumber; //设定 bodyDisplayPageEnd bodyDisplayPageEnd = (currentPageIndex + showPageNumber >= totalPage) totalPage : currentPageIndex + showPageNumber; //设定 firstDisplayPageEnd if (bodyDisplayPageStart > 1) { if(bodyDisplayPageStart - showPageNumber <= 1) firstDisplayPageEnd = bodyDisplayPageStart - 1; else firstDisplayPageEnd = showPageNumber; } else { firstDisplayPageEnd = 0; } //设定 endDisplayPageStart if (bodyDisplayPageEnd < totalPage) { if(bodyDisplayPageEnd + showPageNumber >= totalPage) endDisplayPageStart = bodyDisplayPageEnd + 1; else endDisplayPageStart = totalPage - showPageNumber + 1; } else { endDisplayPageStart = totalPage + 1; } /**//******** 备用算法 Start ********/ // //设定 firstDisplayPageEnd // if (currentPageIndex - showPageNumber > 0 && bodyDisplayPageStart > currentPageIndex - showPageNumber) // firstDisplayPageEnd = (showPageNumber >= totalPage) 0 : showPageNumber; // else // firstDisplayPageEnd = 0; // //设定 endDisplayPageStart // if (bodyDisplayPageEnd < totalPage) // endDisplayPageStart = (bodyDisplayPageEnd + showPageNumber < totalPage) totalPage- showPageNumber + 1 : totalPage+1; // else // endDisplayPageStart = totalPage+1; // // //alert(bodyDisplayPageEnd +"<" +totalCount +"- "+showPageNumber); // ////设定补充首尾 // if(bodyDisplayPageStart > 1 && firstDisplayPageEnd == 0) // firstDisplayPageEnd = (bodyDisplayPageStart > showPageNumber) showPageNumber : bodyDisplayPageStart - 1; // if(bodyDisplayPageEnd < totalPage && endDisplayPageStart > totalPage) // endDisplayPageStart = (bodyDisplayPageEnd & lt; totalPage - showPageNumber) totalCount - showPageNumber + 1 : bodyDisplayPageEnd + 1;//MS 第一个判断 有点多余 TNT2 /**//******** 备用算法 End ********/ //页面参数设定结束 //开始输出 //alert($("#"+barID).html()); // 上一条 if (currentPageIndex <= 1) $("" + preWord + "").appendTo($("#"+barID)); else $(GetPageLink(currentPageIndex- 1,currentPageIndex,preWord,onclick,url,barMark)).appendTo($("#"+barID)); //first for (var i = 1; i <= firstDisplayPageEnd; i++) $(GetPageLink (i,currentPageIndex,i,onclick,url,barMark)).appendTo($("#"+barID)); //省略号 if (firstDisplayPageEnd + 1 < bodyDisplayPageStart) $("").appendTo($("#"+barID)); //body for (var i = bodyDisplayPageStart; i <= bodyDisplayPageEnd; i++) $(GetPageLink (i,currentPageIndex,i,onclick,url,barMark)).appendTo($("#"+barID)); //省略号 if (bodyDisplayPageEnd + 1 < endDisplayPageStart) $("").appendTo($("#"+barID)); //end for (var i = endDisplayPageStart; i <= totalPage; i++) $(GetPageLink (i,currentPageIndex,i,onclick,url,barMark)).appendTo($("#"+barID)); // > if(currentPageIndex >= totalPage) $("" + nextWord + "").appendTo($("#"+barID)); else $(GetPageLink(currentPageIndex + 1 ,currentPageIndex,nextWord,onclick,url,barMark)).appendTo ($("#"+barID)); //alert($("#"+barID).html()); }

分享到：

Pages: 1 2 3 4