jQuery的动态分页效果与时间网络相当。
最近,我们一直在研究jQuery的分页效果,其中之一就是与您分享,分页的效果与时间网络相似。首先,将一个ASPX页面上,用来存储分页。
然后建立一个page.js文件。具体代码如下。js中使用的CSS类是自己设置的。这里没有给出。您可以自己设置CSS样式。
复制代码代码如下所示:
$(文档)Ready(函数(){)
无功总页数= 0; / /总页数,设置在数据处理功能。
为了显示,右/右/右/右/右/右/右键显示
右功能(总页数,极限,rlimit){
var;
如果(parseInt(总页数)限制> = rlimit){
对于(var i = parseInt(总页数)- rlimit + 1;我< = parseInt(总页数);i++){
++;}
}
别的{
对于(var i = parseInt(限制)+ 1;我< =总页数;i++){
++;}
}
返回HTML;
}
在主页、页面、页面、下一页中
功能改变状态(当前页的索引,总页数){
VaR(Button1美元=美元div.pagedivs)。找到(# Button1); / /上一页
var button2 = $(美元div.pagedivs ),(# button2 ); / /下一页
VaR(第一=美元美元div.pagedivs ),(#第一 / /家);
最后美元=美元VaR(div.pagedivs ),(#去年); / /。
如果(parseInt(PageIndex)= = 1){
first.css美元(显示
button1.css美元(显示
别的{
first.css美元(显示
button1.css美元(显示
first.attr美元(页面
button1.attr美元(页面
如果(parseInt(PageIndex)= =总页数){
button2.css美元(显示
last.css美元(显示
别的{
last.css美元(显示
button2.css美元(显示
last.attr美元(页面
button2.attr美元(页面
}
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /跨度的动态分页显示在页面的左侧显示的页面的数量,在正确的页面数量,并限制> rlimit
功能跨度(总页数,页索引、限制、rlimit){
无功iscontinue = true; / /指示是否继续功能
VaR的HTML =| ;
无功变化=(parseInt(总页数)- parseInt(通讯)(parseInt)/(限制)2); / /码数可以改变寻呼指示符
如果(总页数!= 0pagecount!= 1){
如果(总页数<=限制){
对于(var i = 1;i < =总页数;i++){
+}
}
别的{
如果(parseInt(PageIndex)<(limit-2)){
对于(var i = 1;i =限制;i + +){
++;}
…;
HTML + =(总页数,权利限制,通讯);
}
别的{
如果(parseInt(PageIndex)%(limit-2)= = 0){
如果(parseInt(PageIndex)/(limit-2)< = changeparseint(PageIndex)- 1 + parseInt(限制)1 < = parseInt(总页数)- parseInt(rlimit)){
对于(var i = parseInt(PageIndex)- 1;i < parseInt(PageIndex)- 1 +极限;i++){
++;}
…;
HTML + =(总页数,权利限制,通讯);
}
别的{
对于(var i = 1;我<= rlimit;i++){
++;}
…;
VaR休息= parseInt(总页数)- parseInt(通讯);
如果(休息<限制){
对于(var i = parseInt(通讯)+ 1;我< = parseInt(总页数);i++){
++;}
}
别的{
VaR的开始= parseInt(总页数)- parseInt(限制)+ 1;
对于(var i =开始;我< =总页数;i++){
++;}
}
}
}
别的{
HTML = $(div.pagedivs )Html();
$(div.pagedivs)。Html(HTML);
iscontinue = false;
}
}
}
}
如果(iscontinue){
HTML + => > | ;
$(div.pagedivs)。Html(HTML);}
改变状态(当前页的索引,总页数);
$(div.pagedivs ),(一个{页面=+ parseInt(PageIndex)+:可见)。RemoveAttr(href)。RemoveClass(禁用)。AddClass(流),兄弟姐妹(一个{页:可见)。RemoveClass(流)。AddClass(禁用)。Attr(href# );
}
功能页面(页索引){
在这里,您提供了具体的数据,使用ajax动态加载数据处理。
总页数=总数,通过数据处理得到的页面;
跨度(总页数,页索引,7,2); / /呼叫页面上的结果,在这里设置在左边显示7页,右边显示2页。
}
与页面绑定事件相关。
$(div.pagedivs ),(一:可见)。活(单击
VaR结果=美元(这)。Attr(页);
如果((typeof $(这)。Attr(叶))!= 'undefined){
$(这)。RemoveAttr(href)。RemoveClass(禁用)。AddClass(流)(兄弟姐妹),RemoveClass(流)。AddClass(禁用)。Attr(href
页面(结果);
});
});
这是完成的,上面的分页算法可以封装,不涉及具体的项目,可以是通用的。