Yii的分页样式:两种分页的样式

  •   
  • 9390
  • PHP
  • 5
  • super_dodo
  • 2014/08/21

作为后台的系统分页样式是必须的，且很多地方的分页基本都是一致的，所以建议写两个公用的分页的文件。在需要使用的位置直接引入（renderPartial）即可。先看看大概的效果图吧。这是一个相对完整的列表的页面。各位大神可自由发挥。

Yii分页样式

Yii分页样式

先上视图层的代码的部分，其他无关的可以忽略掉，主要就是两个部分的引入_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&#91;'list'&#93; 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&#91;'page'&#93;)) {
		if(isset($_GET&#91;'page'&#93;)) unset($_GET&#91;'page'&#93;);
		$url = '';
		$url .= '?'.http_build_query($_GET);
?>
<div class="pager">
	<div class="pagerRight">
		<div class="countTip">共<span class="pagerTip"><?php echo $data&#91;'count'&#93;;?></span>条记录</div>
		<a href="<?php echo $url.'&page=0';?>" class="firstPage">首页</a>
		<a href="<?php echo $url.'&page='.($data&#91;'page'&#93;-1);?>" class="prevPage">上一页</a>
		<?php
			$start = $data&#91;'page'&#93; > 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&#91;'page'&#93; ? ' class="selected"' : '').'>'.$i.'</a>';
			}
		?>
		<a href="<?php echo $url.'&page='.($data&#91;'page'&#93;+1);?>" class="nextPage">下一页</a>
		<a href="<?php echo $url.'&page='.$data&#91;'pageCount'&#93;;?>" 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&#91;'page'&#93;)) {
		if(isset($_GET&#91;'page'&#93;)) unset($_GET&#91;'page'&#93;);
		$url = '';
		$url .= '?'.http_build_query($_GET);
?>
<div class="pager">
	<div class="pagerLeft">
		共<span class="pagerTip"><?php echo $data&#91;'pageCount'&#93;;?></span>页 -- 共<span class="pagerTip"><?php echo $data&#91;'count'&#93;;?></span>条记录
	</div>
	<div class="pagerRight">
		<a href="<?php echo $url.'&page=0';?>" class="firstPage">首页</a>
		<a href="<?php echo $url.'&page='.($data&#91;'page'&#93;-1);?>" class="prevPage">上一页</a>
		<?php
			$start = $data&#91;'page'&#93; > 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&#91;'page'&#93; ? ' class="selected"' : '').'>'.$i.'</a>';
			}
		?>
		<a href="<?php echo $url.'&page='.($data&#91;'page'&#93;+1);?>" class="nextPage">下一页</a>
		<a href="<?php echo $url.'&page='.$data&#91;'pageCount'&#93;;?>" 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 点击进入查看

忙的时候，不辜负路；爱的时候，不辜负人