喵喵笨兔 の 喵喵的家~遊戲天地 - 首頁(上版面)
喵喵笨兔 の 喵喵的家~遊戲天地 - 首頁(左版面)
首　　頁 最新消息 遊戲攻略 遊戲影片 遊戲圖片 下載區 學習分享 留言板 FB粉絲團
 喵喵笨兔 の 喵喵的家~遊戲天地 - PHP 網頁讀取 MySQL 資料庫資料，進行分頁顯示(2)：bootstrap 美化分頁頁籤及前往指定頁

PHP 網頁讀取 MySQL 資料庫資料，進行分頁顯示 (2) ： bootstrap 美化分頁頁籤及前往指定頁

使用 bootstrap 來美化分頁頁籤及前往指定頁數

　現在 bootstrap 已到 4.0.0 beta2 版本，所以笨兔就嚐鮮以此版本來美化分頁頁籤，並順便做個前往指定頁數，達到如下圖的功能：

　以下為笨兔土法煉鋼，東找西拼寫出的程式碼，或許有些語法令人堪疑，不過笨兔主要以達到分頁及相關設置為主。對資料分頁相關設計有興趣者，不妨參考一下唄！

　若不想自己寫，可用　Bootstrap Table 比較方便，相關用法可參考笨兔的隨手筆記：

Bootstrap 主站及下載：https://getbootstrap.com/

本小站下載：含 Bootstrap 4.0.0 beta2 & jQuery 1.11.0 ~ 3.2.1

  • Bootstrap 4.0 美化分頁頁籤程式碼網址： http://getbootstrap.com/docs/4.0/components/pagination/
  • 笨兔以套用 Bootstrap 其中的 Pagination Sizing 程式碼來做展示。其原始程式碼大約如下：
    <nav aria-label="Page navigation example">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>
  • (1) 把做好的分頁頁籤，全部包在 <nav aria-label="Page navigation example"></nav> 和 <ul class="pagination pagination-sm"></ul> 內，其中 pagination-sm 是縮小頁籤。
    (2) 分頁頁籤的頁碼包在<li class="page-item><li> 內，若要顯示所在頁籤底色，加上 active 即可，如<li class="page-item active">。
    (3) 頁碼要用超連結 <a class="page-link"></a> 包住，如此即可大功告成！^ ^

範例程式碼：

  1. 直接以程式碼來說明用 Bootstrap 美化分頁，及前往指定頁數，主要為紅色字(美化頁籤)和綠色字(指定頁)部份。當然要用 Bootstrap，就要引入 Bootstrap.css、Bootstrap.js 喔！
  2. 此程式碼是延續上篇【html_035】基本分頁 (Pagination)，分頁程式碼的說明部份則去看看該篇唄！　
  3. 前往指定頁數的輸入欄，笨兔以 javascript 語法來控制只能輸入數字，若數值超過總頁數則顯示最後一頁。這部份可參考笨兔另一篇隨手筆記【html_009】script 語法：讓網頁欄位只能輸入數字？英文？中文？
<?php  //MySQL 函數寫法
  $dbhost = 'localhost'; 
  $dbuser = 'root';
  $dbpass = '12345678';
  $dbname = 'pcgame';
  $conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error with MySQL connect') ; 
  mysql_query("SET NAMES 'UTF8'"); 
  mysql_select_db($dbname);

  $sql = 'SELECT * FROM learn';
  $result = mysql_query($sql) or die('MySQL query error');

  //分頁設定
  $per_total = mysql_num_rows($result);  //計算總筆數
  $per = 10;  //每頁筆數
  $pages = ceil($per_total/$per);  //計算總頁數;ceil(x)取>=x的整數,也就是小數無條件進1法

 if(!isset($_GET['page'])){  // !isset 判斷有沒有設置 $_GET['page'] 這個變數
	 $page = 1;
 }elseif($_GET['page']>$pages){  //判斷傳來的$_GET['page']值,超過就為最後一頁
	 $page = $pages;
 }else{
	 $page = $_GET['page'];
 }

  $start = ($page-1)*$per;  //每一頁開始的資料序號(資料庫序號是從0開始)
  $result = mysql_query($sql.' LIMIT '.$start.', '.$per) or die('MySQL query error'); //讀取選取頁的資料

  $page_start = $start +1;  //選取頁的起始筆數
  $page_end = $start + $per;  //選取頁的最後筆數
  if($page_end>$per_total){  //最後頁的最後筆數=總筆數
	 $page_end = $per_total;
  }
?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>喵喵笨兔 ~ PHP 網頁讀取 MySQL 資料庫資料進行分頁顯示</title>
<link href="css/bootstrap-4.0.0-beta 2.min.css" rel="stylesheet">
<script src="js/bootstrap-4.0.0-beta 2.min.js"></script>

<script>
  //只能輸入整數
		function keynum1(e, pnumber){
			if (!/^\d+$/.test(pnumber)){
				e.value = /^\d+/.exec(e.value);
	        }
			return false;
	    }
</script>
</head>

<body>
<h3 align="center"><code>喵喵笨兔 ~ PHP 網頁讀取 MySQL 資料庫資料進行分頁顯示</code></h3>	
<div>	
 <table class="table table-sm">
  <thead>
    <tr>
      <th>分享日期</th>
      <th>分類</th>
      <th>編號</th>
      <th>內容說明</th>
    </tr>
  </thead>
  <tbody>
	  <?php while($row=mysql_fetch_assoc($result)){ //讀取資料到表格內?>
    <tr>
      <td><?php echo $row['l_date'] ?></td>
      <td><?php echo $row['l_sort'] ?></td>
      <td><?php echo $row['l_number'] ?></td>
      <td><?php echo $row['l_description'] ?></td>
    </tr>
	  <? } ?>
  </tbody>
 </table>
</div>

<div class="row">
<div class="col-md-6" align="center">	
  <?php
	//每頁顯示筆數明細
	echo '顯示 '.$page_start.' 到 '.$page_end.' 筆 共 '.$per_total.' 筆，目前在第 '.$page.' 頁 共 '.$pages.' 頁'; 
  ?>
</div>

<div class="col-md-6" align="center">

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-sm">
<?php
  if($pages>1){  //總頁數>1才顯示分頁選單

	//分頁頁碼；在第一頁時,該頁就不超連結,可連結就送出$_GET['page']
	if($page=='1'){
      echo '<li class="page-item"><a class="page-link">首頁</a></li>';
      echo '<li class="page-item"><a class="page-link">上一頁</a></li>';
	}else{
      echo '<li class="page-item"><a class="page-link" href=?page=1>首頁</a></li>';
		echo '<li class="page-item"><a class="page-link" href=?page='.($page-1).'>上一頁</a></li>';
	}

	//中央分頁部份,處於該頁就不超連結,可連結就送出$_GET['page]
  for( $i=1 ; $i<=$pages ; $i++ ) {
		if ( $page-3 < $i && $i < $page+3 ) {
			if($i==$page){
              echo '<li class="page-item active"><a class="page-link">'.$i.'</a></li>';
			}else{
              echo '<li class="page-item"><a class="page-link" href=?page='.$i.'>'.$i.'</a></li>';
			}
		}
	}

	//在最後頁時,該頁就不超連結,可連結就送出$_GET['page']	
	if($page==$pages){
      echo '<li class="page-item"><a class="page-link">下一頁</a></li>';
      echo '<li class="page-item"><a class="page-link">末頁</a></li>';
	}else{
      echo '<li class="page-item"><a class="page-link" href=?page='.($page+1).'>下一頁</a></li>';
      echo '<li class="page-item"><a class="page-link" href=?page='.$pages.'>末頁</a></li>';
	}
  }
  ?>
  <form method="get" class="form-inline"><label>　前往第<input type="text" size="2" name="page" onkeyup="return keynum1(this,value)">頁</label></form>
  </ul>
</nav>
</div>
</div>	
</body>
</html>   
<?php  //PDO 函數寫法
$dbhost = 'localhost'; 
$dbuser = 'root';
$dbpass = '12345678';
$dbname = 'pcgame';
try{
	$dsn = "mysql:host={$dbhost};dbname={$dbname};charset=utf8";
	$conn = new PDO($dsn, $dbuser, $dbpass);
	//發生錯誤出現錯誤提醒
	$conn -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch (PDOException $e){
	//發生錯誤結束資料庫連線並顯示錯誤訊息
	die($e -> getMessage());
}

  $sql = 'SELECT * FROM learn';
  $rs = $conn -> query($sql);

  //分頁設定
  $per_total = $rs -> rowCount();  //計算總筆數
  $per = 10;  //每頁筆數
  $pages = ceil($per_total/$per);  //計算總頁數;ceil(x)取>=x的整數,也就是小數無條件進1法

 if(!isset($_GET['page'])){  // !isset 判斷有沒有設置 $_GET['page'] 這個變數
	 $page = 1;
 }elseif($_GET['page']>$pages){  //判斷傳來的$_GET['page']值,超過就為最後一頁
	 $page = $pages;
 }else{
	 $page = $_GET['page'];
 }

  $start = ($page-1)*$per;  //每一頁開始的資料序號(資料庫序號是從0開始)
  $rs = $conn -> query($sql.' LIMIT '.$start.', '.$per); //讀取選取頁的資料

  $page_start = $start +1;  //選取頁的起始筆數
  $page_end = $start + $per;  //選取頁的最後筆數
  if($page_end>$per_total){  //最後頁的最後筆數=總筆數
	 $page_end = $per_total;
  }
?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>喵喵笨兔 ~ PHP 網頁讀取 MySQL 資料庫資料進行分頁顯示</title>
<link href="css/bootstrap-4.0.0-beta 2.min.css" rel="stylesheet">
<script src="js/bootstrap-4.0.0-beta 2.min.js"></script>

<script>
  //只能輸入整數
		function keynum1(e, pnumber){
			if (!/^\d+$/.test(pnumber)){
				e.value = /^\d+/.exec(e.value);
	        }
			return false;
	    }
</script>
</head>

<body>
<h3 align="center"><code>喵喵笨兔 ~ PHP 網頁讀取 MySQL 資料庫資料進行分頁顯示</code></h3>	
<div>	
 <table class="table table-sm">
  <thead>
    <tr>
      <th>分享日期</th>
      <th>分類</th>
      <th>編號</th>
      <th>內容說明</th>
    </tr>
  </thead>
  <tbody>
	  <?php while($row = $rs -> fetch(PDO::FETCH_ASSOC)){ //讀取資料到表格內?>
    <tr>
      <td><?php echo $row['l_date'] ?></td>
      <td><?php echo $row['l_sort'] ?></td>
      <td><?php echo $row['l_number'] ?></td>
      <td><?php echo $row['l_description'] ?></td>
    </tr>
	  <? } ?>
  </tbody>
 </table>
</div>

<div class="row">
<div class="col-md-6" align="center">	
  <?php
	//每頁顯示筆數明細
	echo '顯示 '.$page_start.' 到 '.$page_end.' 筆 共 '.$per_total.' 筆，目前在第 '.$page.' 頁 共 '.$pages.' 頁'; 
  ?>
</div>

<div class="col-md-6" align="center">

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-sm">
<?php
  if($pages>1){  //總頁數>1才顯示分頁選單

	//分頁頁碼；在第一頁時,該頁就不超連結,可連結就送出$_GET['page']
	if($page=='1'){
      echo '<li class="page-item"><a class="page-link">首頁</a></li>';
      echo '<li class="page-item"><a class="page-link">上一頁</a></li>';
	}else{
      echo '<li class="page-item"><a class="page-link" href=?page=1>首頁</a></li>';
		echo '<li class="page-item"><a class="page-link" href=?page='.($page-1).'>上一頁</a></li>';
	}

	//中央分頁部份,處於該頁就不超連結,可連結就送出$_GET['page]
  for( $i=1 ; $i<=$pages ; $i++ ) {
		if ( $page-3 < $i && $i < $page+3 ) {
			if($i==$page){
              echo '<li class="page-item active"><a class="page-link">'.$i.'</a></li>';
			}else{
              echo '<li class="page-item"><a class="page-link" href=?page='.$i.'>'.$i.'</a></li>';
			}
		}
	}

	//在最後頁時,該頁就不超連結,可連結就送出$_GET['page']	
	if($page==$pages){
      echo '<li class="page-item"><a class="page-link">下一頁</a></li>';
      echo '<li class="page-item"><a class="page-link">末頁</a></li>';
	}else{
      echo '<li class="page-item"><a class="page-link" href=?page='.($page+1).'>下一頁</a></li>';
      echo '<li class="page-item"><a class="page-link" href=?page='.$pages.'>末頁</a></li>';
	}
  }
  ?>
  <form method="get" class="form-inline"><label>　前往第<input type="text" size="2" name="page" onkeyup="return keynum1(this,value)">頁</label></form>
  </ul>
</nav>
</div>
</div>	
</body>
</html>

【點擊看範例結果】

分頁顯示相關應用，可參考笨兔其它隨手筆記：

  1. 【html_035】PHP 網頁讀取 MySQL 資料庫資料分頁顯示(1)：基本分頁 (Pagination)
  2. 【html_037】PHP 網頁讀取 MySQL 資料庫資料分頁顯示(3)：設定資料分頁每頁顯示筆數 & 搜尋功能
  3. 【html_039】PHP 網頁讀取 MySQL 資料庫資料分頁顯示(4)：SORT 排序功能 - 隨時選任一欄位來做升序、降序排列的功能
  4. 【html_044】PHP 網頁讀取 MySQL 資料庫資料分頁顯示(4-1)：SORT 排序功能 - 隨時選任一欄位來做升序、降序排列的功能(2)
笨兔隨手筆記於 2017/11/28

喵喵笨兔 の 喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv