Yii的分页样式:两种分页的样式
- 9395
- PHP
- 5
- super_dodo
- 2014/08/21
作为后台的系统分页样式是必须的,且很多地方的分页基本都是一致的,所以建议写两个公用的分页的文件。在需要使用的位置直接引入(renderPartial)即可。先看看大概的效果图吧。这是一个相对完整的列表的页面。各位大神可自由发挥。
先上视图层的代码的部分,其他无关的可以忽略掉,主要就是两个部分的引入_pagerTool 和 _pager 两个基本相似,底部功能更多些而已。
<div id="toolPager"> <?php $this->renderPartial('/layouts/_pagerTool', array('data'=>$data['pager']));?> </div> <form action="" method="post" id="formList"> <table> <thead><tr><th>新闻标题</th></tr></thead> <tbody> <?php foreach($data['list'] as $item) { ?> <tr><td>......</td></tr> <?php } ?> </tbody> </table> </form> <div id="footerPager"> <?php $this->renderPartial('/layouts/_pager', array('data'=>$data['pager']));?> </div>
头部分分页 /layouts/_pagerTool.php
<?php if(isset($data['page'])) { if(isset($_GET['page'])) unset($_GET['page']); $url = ''; $url .= '?'.http_build_query($_GET); ?> <div class="pager"> <div class="pagerRight"> <div class="countTip">共<span class="pagerTip"><?php echo $data['count'];?></span>条记录</div> <a href="<?php echo $url.'&page=0';?>" class="firstPage">首页</a> <a href="<?php echo $url.'&page='.($data['page']-1);?>" class="prevPage">上一页</a> <?php $start = $data['page'] > 5 ? $data['page']-5 : 1; $end = min($start + 10, $data['pageCount']); for($i = $start; $i <= $end; $i++) { echo '<a href="'.$url.'&page='.$i.'"'.($i == $data['page'] ? ' class="selected"' : '').'>'.$i.'</a>'; } ?> <a href="<?php echo $url.'&page='.($data['page']+1);?>" class="nextPage">下一页</a> <a href="<?php echo $url.'&page='.$data['pageCount'];?>" class="endPage">末页</a> <form action="<?php echo $url;?>" method="post" style="float:right"> <input type="text" name="page" class="jumpPage form-control xx1"/> </form> </div> </div> <?php } ?>
底部的分页 /layouts/_pager.php
<?php if(isset($data['page'])) { if(isset($_GET['page'])) unset($_GET['page']); $url = ''; $url .= '?'.http_build_query($_GET); ?> <div class="pager"> <div class="pagerLeft"> 共<span class="pagerTip"><?php echo $data['pageCount'];?></span>页 -- 共<span class="pagerTip"><?php echo $data['count'];?></span>条记录 </div> <div class="pagerRight"> <a href="<?php echo $url.'&page=0';?>" class="firstPage">首页</a> <a href="<?php echo $url.'&page='.($data['page']-1);?>" class="prevPage">上一页</a> <?php $start = $data['page'] > 5 ? $data['page']-5 : 1; $end = min($start + 10, $data['pageCount']); for($i = $start; $i <= $end; $i++) { echo '<a href="'.$url.'&page='.$i.'"'.($i == $data['page'] ? ' class="selected"' : '').'>'.$i.'</a>'; } ?> <a href="<?php echo $url.'&page='.($data['page']+1);?>" class="nextPage">下一页</a> <a href="<?php echo $url.'&page='.$data['pageCount'];?>" class="endPage">末页</a> <form action="<?php echo $url;?>" method="post" style="float:right"> <input type="text" name="page" class="jumpPage form-control" style="float:left;margin:0 5px;"/> <input type="submit" class="btn btn-default" style="float:right" value="Go"/> <!-- <div class="col-lg-6"> <div class="input-group xx4"> <input type="text" name="page" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="submit">Go!</button> </span> </div> </div> --> </form> </div> </div> <?php } ?>
接下来上css样式
/**分页样式**/ #toolPager{float:right;padding:0 10px;} #footerPager{margin:30px;} .pager{color:#999;height:35px;overflow:hidden;padding:2px 0 1px;text-align:center;vertical-align:top;margin:0;} .pager .countTip{float:left;line-height:30px;margin-right:20px;} .pager .pagerLeft{float:left;padding-left:50px;} .pager .pagerRight{float:right;} .pager a{border:1px solid #E4E4E4;color:#046CB5;float:left;height:30px;line-height:25px;margin:0 1px;border-radius:3px;overflow:hidden;padding:0 6px;text-decoration:none !important;} .pager a.selected {background:#046CB5;border:1px solid #046CB5;color:#FFFFFF;font-weight:700;border-radius:3px;} .pager .firstPage{padding:2px 5px 1px 5px;} .pager .endPage{padding:2px 5px 1px 5px;} .pager .prevPage {background:url("../images/common/arrow_left.gif") no-repeat 7% 50%;padding:2px 5px 1px 16px;} .pager .nextPage{background:url("../images/common/arrow_right.gif") no-repeat 93% 50%;padding:2px 16px 1px 5px;} .pager a:hover {border: 1px solid #046CB5;} .pager .pagerTip {padding:0 5px;font-weight:bold;font-size:14px;color:#ff3600;font-family:'Comic Sans Ms';} .pager .jumpPage{width:30px;}
查看分页的方法请移步 http://www.dodobook.net/php/799 点击进入查看
忙的时候,不辜负路;爱的时候,不辜负人
- 相关阅读
- 猜你喜欢
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
- 空格 经过html_entity_decode后在utf8编码下乱码的问题
- PHP中以multipart/form-data上传文件流
- Laravel执行原生SQL
- 吐血整理60个Redis面试题,全网最全了
- RESTful API规范(详细版)
- 花8亿给员工买房,出差还赠送旅游,全世界福利最好的公司
- 常见PHP的面试笔试题参考
- php中类型判断和NULL,空值检查的方法
- 全是干货!移动Html 5前端性能优化指南
- PHP比较2个数组是否一致的方法
- 怎样让您的企业网站获得更多的流量和收益
- 香港中文大学微情书一等奖:你还在我身旁
- 詹姆斯2014-15赛季长篇原声进攻集锦 天皇下凡谁人可挡
- 使用PHP函数遍历文件的目录树的函数
- 纪录片 互联网时代第5集:崛起
- 热门文章
- 最新文章
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
- 空格 经过html_entity_decode后在utf8编码下乱码的问题
- PHP中以multipart/form-data上传文件流
- Laravel执行原生SQL
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
- 空格 经过html_entity_decode后在utf8编码下乱码的问题
- PHP中以multipart/form-data上传文件流
- Laravel执行原生SQL
- 吐血整理60个Redis面试题,全网最全了
- RESTful API规范(详细版)
相关阅读
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
热门文章
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
最新文章
- 通过Google API客户端访问Google Play帐户报告PHP库
- PHP执行文件的压缩和解压缩方法
- 消息中间件MQ与RabbitMQ面试题
- 如何搭建一个拖垮公司的技术架构?
- Yii2中ElasticSearch的使用示例
随机文章
- SQL语句执行过程详解,一条sql到底是怎样执行的
- WordPress在Apache和Nginx下的Rewrite规则
- [转]每天一个linux命令(24):Linux文件类型与扩展名
- Yii2中使用PHPExcel导入批量用户(读取excel数据)
- 名言名句名诗集锦—元明清