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>