PHP 網頁讀取 MySQL 資料庫資料,進行分頁顯示 (4):SORT 排序功能 - 隨時選任一欄位來做升序、降序排列的功能
PHE 網頁讀取資料庫資料後,以任一欄位來做升序、降序排列的功能
延續上三篇【html_035】(1) 基本分頁 (Pagination)、【html_036】(2) bootstrap 美化分頁頁籤及前往指定頁、【html_037】(3) 分頁每頁顯示筆數 & 搜尋功能,這篇說說設定依任一欄位來做 sort 排序,達到如下圖的功能:
以下為笨兔土法煉鋼,東找西拼寫出的程式碼,或許有些語法令人堪疑,不過笨兔主要以達到分頁及相關設置為主。對資料分頁相關設計有興趣者,不妨參考一下唄!
若不想自己寫,可用 Bootstrap Table 比較方便,相關用法可參考笨兔的隨手筆記:
範例程式碼:
紅色字部份
。<?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); //欄位排序 if($_GET['sltsort']==NULL){ //有沒有設置 $_GET['sltsort'] 變數;沒有就設初始值 $order = 'ASC'; $sortname = 'l_date'; $_GET['sltsort']='0'; }else{ //將要做排序的欄位做成陣列,因同欄位有升降之分,所以設二個 $sortarray = array('l_date','l_date','l_sort','l_sort','l_number','l_number','l_description','l_description'); //$GET回傳變數是設數字,所以依數字來取得陣列內要做排序的欄位名。陣列第1個值以是由0開始 $sortname = $sortarray[$_GET['sltsort']]; if(($_GET['sltsort']) % 2 ==0){ //判斷奇偶數 $order = 'ASC'; //even偶數,升序排列 }else{ $order = 'DESC'; //odd奇數,降升序排列 } } //把要排序的參數加入sql內 $sql = "SELECT * FROM learn WHERE l_sort LIKE '%".$_GET['p_search']."%' OR l_number LIKE '%".$_GET['p_search']."%' OR l_description LIKE '%".$_GET['p_search']."%' ORDER BY ".$sortname." ".$order ; $result = mysql_query($sql) or die('MySQL query error'); //分頁設定 $per_total = mysql_num_rows($result); //計算總筆數 if($_GET['selectpage']==NULL){ //每頁筆數; 初始值設10 $per = 10; }else{ $per = $_GET['selectpage']; } $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 資料庫資料進行分頁顯示(3)</code></h3> <h4 align="center">設定資料分頁每頁顯示筆數 & 搜尋功能</h4> <div class="float-right"> <form method="get" class="form-inline"> <input class="form-control" type="text" placeholder="請輸入搜尋關鍵字" name="p_search" id="p_search"> <button class="btn btn-outline-success" type="submit">搜尋</button> <!-- 隱藏欄位記錄分頁欄位內的資料,如此分頁後再搜尋,才會以所選的分頁筆數來顯示搜尋後資料 --> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <!-- 隱藏欄位記錄欄位排序設定,如此搜尋後才會原排序方式--> <input name="sltsort" type="hidden" value="<?=$_GET['sltsort'] ?>"> </form> </div> <div>
<table class="table table-sm">
<thead>
<tr>
<th> <form method="get"> 分享日期 <select class="small" name="sltsort" id="sltsort" onChange="submit()"> <option></option> <option value="0" <?php if($_GET['sltsort']=='0'){ echo 'selected';} ?>>▲</option> <option value="1" <?php if($_GET['sltsort']=='1'){ echo 'selected';} ?>>▼</option> </select> <!-- 隱藏欄位記錄原搜尋及分頁筆數資料--> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> </form> </th> <th> <form method="get"> 分類 <select class="small" name="sltsort" id="sltsort" onChange="submit()"> <option></option> <option value="2" <?php if($_GET['sltsort']=='2'){ echo 'selected';} ?>>▲</option> <option value="3" <?php if($_GET['sltsort']=='3'){ echo 'selected';} ?>>▼</option> </select> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> </form> </th> <th> <form method="get"> 編號 <select class="small" name="sltsort" id="sltsort" onChange="submit()"> <option></option> <option value="4" <?php if($_GET['sltsort']=='4'){ echo 'selected';} ?>>▲</option> <option value="5" <?php if($_GET['sltsort']=='5'){ echo 'selected';} ?>>▼</option> </select> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> </form> </th> <th> <form method="get"> 內容說明 <select class="small" name="sltsort" id="sltsort" onChange="submit()"> <option></option> <option value="6" <?php if($_GET['sltsort']=='6'){ echo 'selected';} ?>>▲</option> <option value="7" <?php if($_GET['sltsort']=='7'){ echo 'selected';} ?>>▼</option> </select> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> </form> </th> </tr>
</thead> <?php //判斷有無搜尋到資料(start) $row = mysql_fetch_assoc($result); if($row['l_id']==NULL){ echo '<tr><td colspan="4" align="center"><code>Sorry!無您要搜尋的資枓!</code></td></tr>'; }else { ?> <tbody>
<?php do{ //讀取資料到表格內?> <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>
<? }while($row=mysql_fetch_assoc($result)); ?> </tbody>
</table>
</div> <div class="row">
<div class="col-md-6" align="center"> <form id="frmpage" method="get"> <?php
//每頁顯示筆數明細
echo '顯示 '.$page_start.' 到 '.$page_end.' 筆 共 '.$per_total.' 筆,目前在第 '.$page.' 頁 共 '.$pages.' 頁';
?> 每頁顯示 <select name="selectpage" id="selectpage" onChange="submit()"> <option value="10">10</option> <option value="25">25</option> <option value="100">100</option> <option value="<?php echo $per_total; ?>">All</option> </select>筆 <!-- 隱藏欄位記錄搜尋欄位內的資料,如此搜尋後再分頁,才只顯示搜尋後資料--> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> <!-- 隱藏欄位記錄欄位排序設定,如此重設分頁筆頁才會原排序方式--> <input name="sltsort" type="hidden" value="<?=$_GET['sltsort'] ?>"> </form> </div> <div class="col-md-6" align="center"> <nav aria-label="Page navigation example"> <ul class="pagination pagination-sm"> <?php if($pages>1){ //總頁數>1才顯示分頁選單 ?> <?php //分頁頁碼;在第一頁時,該頁就不超連結,可連結就送出$_GET['page'] //好像IE用中文搜尋翻頁時會出現編碼錯誤現象,若有遇此現象,把搜尋參數加上編碼字串即可,如rawurlencode($_GET['p_search']) //連結加上搜尋,翻頁,排序參數,翻頁後才會保留原設定參數 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&p_search='.$_GET['p_search'].'&selectpage='.$_GET['selectpage'].'&sltsort='.$_GET['sltsort'].'>首頁</a></li>'; echo '<li class="page-item"><a class="page-link" href=?page='.($page-1).'&p_search='.$_GET['p_search'].'&selectpage='.$_GET['selectpage'].'&sltsort='.$_GET['sltsort'].'>上一頁</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.'&p_search='.$_GET['p_search'].'&selectpage='.$_GET['selectpage'].'&sltsort='.$_GET['sltsort'].'>'.$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).'&p_search='.$_GET['p_search'].'&selectpage='.$_GET['selectpage'].'&sltsort='.$_GET['sltsort'].'>下一頁</a></li>'; echo '<li class="page-item"><a class="page-link" href=?page='.$pages.'&p_search='.$_GET['p_search'].'&selectpage='.$_GET['selectpage'].'&sltsort='.$_GET['sltsort'].'>末頁</a></li>'; } ?> <form method="get" class="form-inline"><label> 前往第<input type="text" size="2" name="page" onkeyup="return keynum1(this,value)">頁</label> <!-- 隱藏欄位記錄搜尋欄,分頁筆數,及排序的資料,如此搜尋後指定頁,才只顯示搜尋後資料--> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <input name="sltsort" type="hidden" value="<?=$_GET['sltsort'] ?>"> </form> <?php } ?> </ul> </nav> </div>
</div> <?php } //判斷有無搜尋到資料(end) ?> <script> document.getElementById('p_search').value='<?=$_GET['p_search'] ?>'; //搜尋欄位保留輸入的字 document.getElementById('selectpage').value='<?=$_GET['selectpage'] ?>'; //保留下拉所選每頁筆數 </script> </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());
} //欄位排序 if($_GET['sltsort']==NULL){ //有沒有設置 $_GET['sltsort'] 變數;沒有就設初始值 $order = 'ASC'; $sortname = 'l_date'; $_GET['sltsort']='0'; }else{ //將要做排序的欄位做成陣列,因同欄位有升降之分,所以設二個 $sortarray = array('l_date','l_date','l_sort','l_sort','l_number','l_number','l_description','l_description'); //$GET回傳變數是設數字,所以依數字來取得陣列內要做排序的欄位名。陣列第1個值以是由0開始 $sortname = $sortarray[$_GET['sltsort']]; if(($_GET['sltsort']) % 2 ==0){ //判斷奇偶數 $order = 'ASC'; //even偶數,升序排列 }else{ $order = 'DESC'; //odd奇數,降升序排列 } } //把要排序的參數加入sql內 $sql = "SELECT * FROM learn WHERE l_sort LIKE '%".$_GET['p_search']."%' OR l_number LIKE '%".$_GET['p_search']."%' OR l_description LIKE '%".$_GET['p_search']."%' ORDER BY ".$sortname." ".$order ; $rs = $conn -> query($sql); //分頁設定 $per_total = $rs -> rowCount(); //計算總筆數 if($_GET['selectpage']==NULL){ //每頁筆數; 初始值設10 $per = 10; }else{ $per = $_GET['selectpage']; } $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 資料庫資料進行分頁顯示(3)</code></h3> <h4 align="center">設定資料分頁每頁顯示筆數 & 搜尋功能</h4> <div class="float-right"> <form method="get" class="form-inline"> <input class="form-control" type="text" placeholder="請輸入搜尋關鍵字" name="p_search" id="p_search" value="<?php if($_GET['p_search']!=NULL){echo $_GET['p_search']; } ?>"> <button class="btn btn-outline-success" type="submit">搜尋</button> <!-- 隱藏欄位記錄分頁欄位內的資料,如此分頁後再搜尋,才會以所選的分頁筆數來顯示搜尋後資料 --> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <!-- 隱藏欄位記錄欄位排序設定,如此搜尋後才會原排序方式--> <input name="sltsort" type="hidden" value="<?=$_GET['sltsort'] ?>"> </form> </div> <div>
<table class="table table-sm">
<thead>
<tr>
<th> <form method="get"> 分享日期 <select class="small" name="sltsort" id="sltsort" onChange="submit()"> <option></option> <option value="0" <?php if($_GET['sltsort']=='0'){ echo 'selected';} ?>>▲</option> <option value="1" <?php if($_GET['sltsort']=='1'){ echo 'selected';} ?>>▼</option> </select> <!-- 隱藏欄位記錄原搜尋及分頁筆數資料--> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> </form> </th> <th> <form method="get"> 分類 <select class="small" name="sltsort" id="sltsort" onChange="submit()"> <option></option> <option value="2" <?php if($_GET['sltsort']=='2'){ echo 'selected';} ?>>▲</option> <option value="3" <?php if($_GET['sltsort']=='3'){ echo 'selected';} ?>>▼</option> </select> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> </form> </th> <th> <form method="get"> 編號 <select class="small" name="sltsort" id="sltsort" onChange="submit()"> <option></option> <option value="4" <?php if($_GET['sltsort']=='4'){ echo 'selected';} ?>>▲</option> <option value="5" <?php if($_GET['sltsort']=='5'){ echo 'selected';} ?>>▼</option> </select> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> </form> </th> <th> <form method="get"> 內容說明 <select class="small" name="sltsort" id="sltsort" onChange="submit()"> <option></option> <option value="6" <?php if($_GET['sltsort']=='6'){ echo 'selected';} ?>>▲</option> <option value="7" <?php if($_GET['sltsort']=='7'){ echo 'selected';} ?>>▼</option> </select> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> </form> </th> </tr>
</thead> <?php //判斷有無搜尋到資料(start) $row = $rs -> fetch(PDO::FETCH_ASSOC); if($row['l_id']==NULL){ echo '<tr><td colspan="4" align="center"><code>Sorry!無您要搜尋的資枓!</code></td></tr>'; }else { ?> <tbody>
<?php do{ //讀取資料到表格內?> <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>
<? }while($row = $rs -> fetch(PDO::FETCH_ASSOC)); ?> </tbody>
</table>
</div> <div class="row">
<div class="col-md-6" align="center"> <form id="frmpage" method="get"> <?php
//每頁顯示筆數明細
echo '顯示 '.$page_start.' 到 '.$page_end.' 筆 共 '.$per_total.' 筆,目前在第 '.$page.' 頁 共 '.$pages.' 頁';
?> 每頁顯示 <select name="selectpage" id="selectpage" onChange="submit()"> <option value="10" <?php if($_GET['selectpage']==10){ echo 'selected';} ?>>10</option>
<option value="25" <?php if($_GET['selectpage']==25){ echo 'selected';} ?> >25</option>
<option value="100" <?php if($_GET['selectpage']==100){ echo 'selected';} ?>>100</option>
<option value="<?php echo $per_total; ?>" <?php if($_GET['selectpage']==$per_total){ echo 'selected';} ?>>All</option></select>筆 <!-- 隱藏欄位記錄搜尋欄位內的資料,如此搜尋後再分頁,才只顯示搜尋後資料--> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> <!-- 隱藏欄位記錄欄位排序設定,如此重設分頁筆頁才會原排序方式--> <input name="sltsort" type="hidden" value="<?=$_GET['sltsort'] ?>"> </form> </div> <div class="col-md-6" align="center"> <nav aria-label="Page navigation example"> <ul class="pagination pagination-sm"> <?php if($pages>1){ //總頁數>1才顯示分頁選單 ?> <?php //分頁頁碼;在第一頁時,該頁就不超連結,可連結就送出$_GET['page'] //好像IE用中文搜尋翻頁時會出現編碼錯誤現象,若有遇此現象,把搜尋參數加上編碼字串即可,如rawurlencode($_GET['p_search']) //連結加上搜尋,翻頁,排序參數,翻頁後才會保留原設定參數 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&p_search='.$_GET['p_search'].'&selectpage='.$_GET['selectpage'].'&sltsort='.$_GET['sltsort'].'>首頁</a></li>'; echo '<li class="page-item"><a class="page-link" href=?page='.($page-1).'&p_search='.$_GET['p_search'].'&selectpage='.$_GET['selectpage'].'&sltsort='.$_GET['sltsort'].'>上一頁</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.'&p_search='.$_GET['p_search'].'&selectpage='.$_GET['selectpage'].'&sltsort='.$_GET['sltsort'].'>'.$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).'&p_search='.$_GET['p_search'].'&selectpage='.$_GET['selectpage'].'&sltsort='.$_GET['sltsort'].'>下一頁</a></li>'; echo '<li class="page-item"><a class="page-link" href=?page='.$pages.'&p_search='.$_GET['p_search'].'&selectpage='.$_GET['selectpage'].'&sltsort='.$_GET['sltsort'].'>末頁</a></li>'; } ?> <form method="get" class="form-inline"><label> 前往第<input type="text" size="2" name="page" onkeyup="return keynum1(this,value)">頁</label> <!-- 隱藏欄位記錄搜尋欄,分頁筆數,及排序的資料,如此搜尋後指定頁,才只顯示搜尋後資料--> <input name="p_search" type="hidden" value="<?=$_GET['p_search'] ?>"> <input name="selectpage" type="hidden" value="<?=$_GET['selectpage'] ?>"> <input name="sltsort" type="hidden" value="<?=$_GET['sltsort'] ?>"> </form> <?php } ?> </ul> </nav> </div>
</div> <?php } //判斷有無搜尋到資料(end) ?> </body>
</html>
分頁顯示相關應用,可參考笨兔其它隨手筆記: