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

页面(结果);

});

});



这是完成的,上面的分页算法可以封装,不涉及具体的项目,可以是通用的。