javaweb分页思想

web上的分页分析

 

在web编写中的经常会遇到，数据需要分页的情况。当数据量不是很大的时候。

 

可以直接使用js来分页。可以很好的提高性能。简化代码。数据量大的时候。还是需要使用java的分页类还处理。

 

今天我来分析下。分页中导航的显示效果的实现。

 

显示效果：

[页面总数小于等于10，全部显示，当前页特殊显示]

上一页  1   2   3   4   5   6   7   8   9   10   下一页

[页面总数大于10，部分显示，当前页特殊显示]

上一页  1   2   3   …   20   下一页       [当前页面为首页时，上一页不可用]

上一页  1   2   3   4    …   20   下一页

上一页  1   2   3   4   5    …   20   下一页

上一页  1   2   3   4   5   6   …   20   下一页

上一页  1   …    3     4    5    6    7     …  20  下一页

上一页  1   …   14   15  16  17  18    ...  20  下一页

上一页  1   …   15   16  17  18  19  20  下一页

上一页  1   …   16   17  18  19  20  下一页

上一页  1   …   17   18  19  20  下一页

上一页  1   …   18   19  20  下一页[当前页面为末页时，下一页不可用]

 

算法提取：

0.页码显示规则：

当前页为首页时不显示上一页；      上一页  1   2   3   …   20   下一页

当前页为尾页时不显示下一页；      上一页  1   …   17   18  19  20  下一页

1.页面总数(n)<=10 {

显示全部页码：上一页  1   2   3   4   5   6   7   8   9   10   下一页

}

2.页面总数(n) > 10 {

2.1     当前页码 <=  4 {

左侧显示所有 +  当前页码  +  右侧2个页码 + ... + 尾页

上一页  1   2   3   …   20   下一页

上一页  1   2   3   4    …   20   下一页

上一页  1   2   3   4   5    …   20   下一页

上一页  1   2   3   4   5   6   …   20   下一页

}

2.2      当前页码 > 4 且<= 页面总数(n) - 3 {

首页  + ... + 左侧2个页码  + 当前页码  + 右侧2个页码  + ...  +  尾页

上一页  1   …    3     4    5    6    7     …  20  下一页

上一页  1   …   14   15  16  17  18    ...  20  下一页

}

2.3      当前页码 > 页面总数(n) - 3 {

首页 + ... +  左侧2个页面 +  当前页码  +  右侧显示所有

上一页  1   …   15   16  17  18  19  20  下一页

上一页  1   …   16   17  18  19  20  下一页

上一页  1   …   17   18  19  20  下一页

上一页  1   …   18   19  20  下一页

}

}

 

 

 

下面我来把他修改成java语言。

[java]

 

public class PageTest {

 

public static String pageControl(int page,int count){

String strHtml = "";

 

if(page > 1){

strHtml += "上一页";

}

if(count <= 10){

for(int i = 1;i<=count;i++){

if(page == i){

strHtml+=" ["+i+"]";

}else{

strHtml+=" "+i;

}

}

}else{

if(page<4){

for(int i = page-1;i>0;i--){

strHtml+=" "+i;

}

strHtml+=" ["+page+"]";

strHtml+=" "+(page+1);

strHtml+=" "+(page+2);

strHtml+=" ...";

strHtml+=" "+count;

 

}

if(page>4 && (page<=count-3)){

strHtml+=" "+1;

strHtml+=" ...";

strHtml+=" "+(page-2);

strHtml+=" "+(page-1);

strHtml+=" ["+page+"]";

strHtml+=" "+(page+1);

strHtml+=" "+(page+2);

strHtml+=" ...";

strHtml+=" "+count;

 

}

if(page>count-3){

strHtml+=" "+1;

strHtml+=" ...";

strHtml+=" "+(page-2);

strHtml+=" "+(page-1);

strHtml+=" ["+page+"]";

for(int i = page+1;i<count;i++){

strHtml+=" "+i;

}

}

 

}

 

if(page < count){

strHtml += "下一页";

}

 

return strHtml;

}

 

public static void main(String[] args) {

System.out.println(PageTest.pageControl(6, 20));

}

}

[/java]

 

这个是分页导航的效果。需要对应的效果。可以自行修改。

 

 

写成js:

<%@ page language="java" pageEncoding="UTF-8" %>

<script type="text/javascript">
var sbPageString ="";
var displayNum = 10;//显示页面数量
var totalPages = ${pageCount}; //页面码数
var pageNumber = ${pagedVo.paging.pageNumber}; //当前页码
var startPage = 0; //首页
var endPage = 0; //最后页

if (totalPages <= displayNum) {
startPage = 1;
endPage = totalPages;
}/* else if (pageNumber <= (displayNum - 1) / 2) {
startPage = 1;
endPage = displayNum;
} else if (pageNumber >= totalPages - (displayNum - 1) / 2) {
startPage = totalPages - displayNum + 1;
endPage = totalPages;
} else {
startPage = pageNumber - (displayNum - 1) / 2;
endPage = pageNumber + (displayNum - 1) / 2;
} */
if(totalPages<=10){
if(totalPages==1||totalPages==0){

sbPageString = "<a href='javascript:void(0)' onclick='toPage("+1+")' style='background-color:#EFCFB6;'>" + 1 + "</a>";
}else{
sbPageString += "<a href='javascript:void(0)' class='first-child' onclick='toPage("+(pageNumber -1)+")' >上一页 <p></p></a>";
for(var i=1;i<=totalPages;i++){
if(i<pageNumber){
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+i+")'>" + i + "</a>";
}else if(i==pageNumber){
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+(pageNumber)+")' style='background-color:#EFCFB6;'>" + pageNumber + "</a>";
}else if(i>pageNumber){
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+i+")'>" + i + "</a>";
}
}
sbPageString += "<a href='javascript:void(0)' class='first-child' onclick='toPage("+(pageNumber +1)+")'>下一页 <p class='dpl-paginator-arrow-right'></p></a>";
}
}
if(totalPages>10){
if(pageNumber!=1){
sbPageString += "<a href='javascript:void(0)' class='first-child' onclick='toPage("+(pageNumber -1)+")' >上一页 <p></p></a>";
}
if(pageNumber<=4){
for(var i=1;i<=parseInt(pageNumber);i++){
if(i!=pageNumber){
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+i+")' >" + i + "</a>";}
if(i==pageNumber){
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+(pageNumber)+")' style='background-color:#EFCFB6;'>" + pageNumber + "</a>";
}
}
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+(pageNumber+1)+")'>" + (pageNumber+1) + "</a>";
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+(pageNumber+2)+")'>" + (pageNumber+2) + "</a><span style='float:left;'>...</span>";

sbPageString += "<a href='javascript:void(0)' onclick='toPage("+totalPages+")'>" + totalPages + "</a>";

}
if(pageNumber>4&&pageNumber<=totalPages-3){
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+1+")'>" + 1 + "</a><span style='float:left;'>...</span>";

sbPageString += "<a href='javascript:void(0)' onclick='toPage("+(pageNumber-2)+")'>" + (pageNumber-2) + "</a>";
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+(pageNumber-1)+")'>" + (pageNumber-1) + "</a>";
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+pageNumber+")' style='background-color:#EFCFB6;'>" + pageNumber + "</a>";
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+(pageNumber+1)+")'>" + (pageNumber+1) + "</a>";
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+(pageNumber+2)+")'>" + (pageNumber+2) + "</a><span style='float:left;'>...</span>";

sbPageString += "<a href='javascript:void(0)' onclick='toPage("+totalPages+")'>" + totalPages + "</a>";
}
if(pageNumber>totalPages-3){
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+1+")'>" + 1 + "</a><span style='float:left;'>...</span>";

sbPageString += "<a href='javascript:void(0)' onclick='toPage("+(pageNumber-2)+")'>" + (pageNumber-2) + "</a>";
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+(pageNumber-1)+")'>" + (pageNumber-1) + "</a>";
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+pageNumber+")' style='background-color:#EFCFB6;'>" + pageNumber + "</a>";
for(var i=pageNumber+1;i<=totalPages;i++){
sbPageString += "<a href='javascript:void(0)' onclick='toPage("+i+")'>" + i + "</a>";
}
}
if(parseInt(pageNumber)!=totalPages){
sbPageString += "<a href='javascript:void(0)' class='first-child' onclick='toPage("+(pageNumber +1)+")' >下一页 <p></p></a>";
}
}

$(".yema").append(sbPageString);
</script>