bootstrap+PHP分页样式实现

自己总结的bootstrap+PHP分页样式实现

1. 引入js和bootstrap

 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. php方法

// 得到当前分页页码
if(!isset($_GET['page'])){
	$page = 1;
}else{
	$page = $_GET['page'];
}
// 计算分页
$pagenum = ($page-1)*10;
// 查询数据
$list = $mysql->select_all('表名','*',$where .' order by id desc limit '.$pagenum.',10');
// 查询总条数
$count= $mysql->count(SQL语句);
// 计算总页数
$to_pages=ceil($count/10);
// 得到分页html
$html = getpage($page,$to_pages);  当前页码和总条数

3. 分页方法

function getpage($page,$to_pages){
	$html ='<ul class="pagination ">';
	$start = 1;
	$end = $to_pages;
	//初始化开始，结束页
	$show_page = 9;
	//页面显示数字按钮数
	$offset_page = ($show_page-1)/2;
	//点击按钮左右按钮的数量
	$page_banner = "";
	//通过字符串拼接分页
	if($page > 1){
	    $html.= "<li><a href='".$_SERVER['PHP_SELF']."?page=1'>首页</a></li>";
	    $html.= "<li><a href='".$_SERVER['PHP_SELF']."?page=$p1'>上一页</a></li>";
	}
	//页数大一1才显示首页和上一页
	if($to_pages > $show_page){
	    //先判断总页数与显示页数的关系
	    if($page>$offset_page){
	        //开始的页码为页数减去偏移量
	        $start = $page - $offset_page;
	        $end = $to_pages>$page+$offset_page?$page+$offset_page:$to_pages;
	    }else{
	        $start = 1;
	        $end = $show_page;
	    }
	    if($page+$offset_page>$to_pages){
	        $start = $start - ($page + $offset_page - $to_pages);
	    }
	}
	
	for($i = $start;$i<=$end;$i++){
		if($i==$page){
			$active = 'active';
		}else{
			$active = '';
		}
	    $html .="<li class='".$active."'><a href='".$_SERVER['PHP_SELF']."?page=$i'>$i</a></li>";
	}
	
	if($page < $to_pages){
	    $html.="<li><a href='".$_SERVER['PHP_SELF']."?page=$p2'>下一页</a></li>";
	    $html.= "<li><a href='".$_SERVER['PHP_SELF']."?page=$to_pages'>尾页</a></li>";
	}//页数小于总页数才显示尾页和下一页
	$html.="</ul>";
	return $html;
}

4. 页面显示

直接输出得到的html

<?php echo $html;?>

5. 样式调整

	<style>
			ul.pagination {
			    display: inline-block;
			    padding: 0;    margin: 2% auto;
			}
			
			ul.pagination li {display: inline;}
			
			ul.pagination li a {
			    color: black;
			    float: left;
			    padding: 8px 16px;
			    text-decoration: none;
			}
			
		</style>

6.查看效果

分享结束 希望帮助到你们 我也是小白一名 这些都是自己总结看的 要是侵权联系我