博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
分页样式 和 后台
阅读量:6247 次
发布时间:2019-06-22

本文共 3156 字,大约阅读时间需要 10 分钟。

hot3.png

1、先看效果图

141559_HPgk_3551274.png

(前7页)

141813_zxvy_3551274.png

(中间)

141627_VRN4_3551274.png

(后7页)

 

2、代码部分

其中 传参 和  跳转部分也就不说了----直接贴 CSS样式  和  后端代码

.wrap .page-box {  width: 100%;  position: relative;  height: 32px;  margin: 30px 0 40px 0;}.wrap .page-box .page {  position: absolute;  transform: translate(-50%, -50%);  left: 50%;  top: 50%;}.wrap .page-box .page a {  width: 30px;  height: 30px;  display: block;  line-height: 30px;  border: 1px solid #ccc;  box-sizing: border-box;  text-align: center;  float: left;  margin-right: 10px;  font-size: 13px;}.wrap .page-box .page a:last-child {  margin-right: 0;}.wrap .page-box .page a:hover {  background: #6cbef6;  border-color: #6cbef6;  color: #fff;  transition: all .5s;}.wrap .page-box .page a.on {  background: #6cbef6;  border-color: #6cbef6;  color: #fff;}.wrap .page-box .page a.no {  opacity: 0;  cursor: default;}

DIV整体结构图如下,但这里没有分页没有写在HTML中,写在了Java代码中,直接放到了前台

public class Pages {	public static final String ATTR_PAGE = "_page";	public static final String ATTR_TOTAL_PAGE ="_total_page";	public static final String ATTR_TOTAL_RECODE = "_total_recode";	private int page; // 当前页	private int totalPage; // 总页数	private int totalRecode; //总记录数	private String url; // 当前url,再参数	private String params;	private boolean useJSRequest;	private String pageStyle;	private static final int t = 7;  // 分页样式控制              //中间省却getter setter 和 各种调用代码    	/**	 * 新的分页Lee	 * page; 		// 当前页	 * totalPage; 	// 总页数	 * totalRecode; //总记录数	 * url; 		// 当前url,再参数	 */	private void writeNewPage(StringBuilder sb){		//总共页数		sb.append("

总条数:").append(totalRecode).append("条

"); //上一页 sb.append("
"); if (page <= 1) {//
"); }else{ sb.append("
"); } // 小于前7页时展现形式 if( page < t ){ //前7页的样式 for(int i = 1; i <= t ; i ++ ){ if( i > totalPage ) break; if(page == i){ sb.append("
"+page+""); }else{ sb.append("
"+i+""); } } //总页数大于7页,显示最后两页 if(totalPage>t+1){ sb.append("
... "); if(totalPage-2>=t){ int lastpage = (totalPage-1); sb.append("
"+lastpage+""); sb.append("
"+totalPage+""); }else{ sb.append("
"+totalPage+""); } } //大于7页小于总页数时的样式 }else if( page >= t ){ //显示前两页 :1 2 ... 中间页 ... n n+1 sb.append("
1"); sb.append("
2"); sb.append("
..."); if((totalPage-page)>=t){ for(int i = 1; i <= t; i ++ ){ if(i == 4){ sb.append("
"+page+""); }else{ sb.append("
"+(page-(4-i))+""); } } sb.append("
... "); int lastpage = (totalPage-1); sb.append("
"+lastpage+""); sb.append("
"+totalPage+""); //到后7页时的样式: 1 2 ... 后7页 }else{ int first = 0; if(totalPage-2>t){ first = totalPage -7; }else{ first = 3; } for(int i = 0; i <= t; i ++ ){ int x = first + i ; if( x > totalPage ) break; if( page == x ){ sb.append("
"+x+""); }else{ sb.append("
"+x+""); } } } } // 结尾 if(page
> "); }else{ sb.append("
"); } sb.append("
"); }}

 

转载于:https://my.oschina.net/u/3551274/blog/1491492

你可能感兴趣的文章
DELL EqualLogic PS存储数据恢复全过程整理
查看>>
《Node.js入门经典》一2.3 安装模块
查看>>
《Java 开发从入门到精通》—— 2.5 技术解惑
查看>>
Linux 性能诊断 perf使用指南
查看>>
实操分享:看看小白我如何第一次搭建阿里云windows服务器(Tomcat+Mysql)
查看>>
Sphinx 配置文件说明
查看>>
数据结构实践——顺序表应用
查看>>
python2.7 之centos7 安装 pip, Scrapy
查看>>
机智云开源框架初始化顺序
查看>>
Spark修炼之道(进阶篇)——Spark入门到精通:第五节 Spark编程模型(二)
查看>>
一线架构师实践指南:云时代下双活零切换的七大关键点
查看>>
ART世界探险(19) - 优化编译器的编译流程
查看>>
玩转Edas应用部署
查看>>
music-音符与常用记号
查看>>
sql操作命令
查看>>
zip 数据压缩
查看>>
Python爬虫学习系列教程
查看>>
【数据库优化专题】MySQL视图优化(二)
查看>>
【转载】每个程序员都应该学习使用Python或Ruby
查看>>
PHP高级编程之守护进程,实现优雅重启
查看>>