分享到:
下面是这个插件在项目中必须满足的几个功能要求:
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