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   下一页
}

}

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));

	}

}

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

转载来源：http://software.intel.com/zh-cn/blogs/2011/12/16/web-2/