當資料以清單列表時, 常常會有這樣的需求：讓操作者靈活地點選決定以哪個欄位來排序。
先以後台會員管理清單來練習, 接著可以舉一反三地練習新訊管理清單。
<?php include_once('./admin_login_chk.php'); require_once('../shared/conn_pdo.php'); include_once('../shared/assist.php'); try { $max_rows = 20; //一頁最多筆數 $curr_page = 0; //目前第幾頁(索引號碼) if( isset( $_GET['curr_page'] ) ){ $curr_page = $_GET['curr_page']; } $first_row = $curr_page * $max_rows; //目前頁面第一筆的索引號碼 $last_row = $first_row + $max_rows; //目前頁面最後一筆的索引號碼 $total_rows = 0; //總共的筆數 $total_pages = 0; //總共的頁數 $page_file = 'admin_mem'; //連結的頁面 //判斷是否為搜尋關鍵字================================================== $where = ''; //SELECT中WHERE條件語法 $search_keyword = ''; //接收輸入查詢的關鍵字 $search_str =''; //頁碼連結時需帶著的參數及參數值:搜尋關鍵字 //判斷排序的依據======================================================= $dataf = 'mem_time_m'; //排序依據的欄位 $datas = 'DESC'; //排序依據的順序方向(a:ASC,d:DESC) $sort = 'ORDER BY '.$dataf.' '.$datas; //SELECT 中 ORDER BY 語法 $sort_str = '&dataf='.$dataf.'&datas='.$datas; //頁碼連結時需帶著的參數及參數值 //建立資料集：算出全部筆數及全部頁數 $sql_str = "SELECT * FROM member $where $sort"; $RS_mem_total = $conn -> query($sql_str); $total_rows = $RS_mem_total -> rowCount(); //總筆數 $total_pages = ceil($total_rows/$max_rows); //總頁數 $sql_str = "SELECT * FROM member $where $sort LIMIT $first_row, $max_rows"; $RS_mem = $conn -> query($sql_str); } catch ( PDOException $e ){ die("ERROR!!!: ". $e->getMessage()); } ?>
WEB <div class="w3-responsive">
<table border="1" class="w3-table-all mem-table">
<tr>
<th>會員[id]名稱</th>
<th>會員帳號</th>
<th>會員註冊時間</th>
<th>最後處理時間</th>
<th>會員權限等級</th>
</tr>
<?php
foreach( $RS_mem as $row_RS_mem ){
?>
<tr>
<td class="w3-left-align">[<?php echo $row_RS_mem['mem_id']; ?>]
<?php echo $row_RS_mem['mem_name']; ?></td>
<td class="w3-left-align"><?php echo $row_RS_mem['mem_mail']; ?></td>
<td><?php echo $row_RS_mem['mem_time_c']; ?></td>
<td><?php echo $row_RS_mem['mem_time_m']; ?></td>
<td><?php echo $row_RS_mem['mem_level']; ?></td>
</tr>
<?php } ?>
</table>
<?php include('../shared/pager.php'); ?>
</div>
pager.php 需要小小修改一下
<?php /*需要的變數： $curr_page 目前第幾頁(索引號碼) $first_row 目前頁面第一筆的索引號碼 $last_row 目前頁面最後一筆的索引號碼 $total_rows 總共的筆數 $total_pages 總共的頁數 $page_file 連結的頁面 $search_str 連結時需帶著的參數:搜尋關鍵字 $sort_str 連結時需帶著的參數:排序依據 $class_str 連結時需帶著的參數:分類id */ ?> <div class="pager"> <div> <?php //顯示筆數資訊 ============================================ echo ($first_row+1).'~'.min($last_row, $total_rows).' / '.$total_rows.' 筆'; ?> </div> <div> <?php //顯示 第一筆及上一筆的連結 ================================= if( $curr_page>0 ){ echo '<a href="./?page='.$page_file.'&curr_page=0'.$search_str.$sort_str.$class_str. '"><i class="fa fa-angle-double-left"></i></a>'; echo '<a href="./?page='.$page_file.'&curr_page='.($curr_page-1). $search_str.$sort_str.$class_str.'"><i class="fa fa-angle-left"></i></a>'; }else{ echo '<span class="spanarea"></span><span class="spanarea"></span>'; } //顯示頁碼連結 ============================================ for( $i=0; $i<$total_pages; $i++ ){ if( $i == $curr_page ){ echo '<span class="current">'.($i+1).'</span>'; }else{ echo '<a href="./?page='.$page_file.'&curr_page='.$i.$search_str.$sort_str.$class_str. '">'.($i+1).'</a>'; } } //顯示 下一筆及最後一筆的連結 ================================ if( $curr_page<$total_pages-1 ){ echo '<a href="./?page='.$page_file.'&curr_page='.($curr_page+1). $search_str.$sort_str.$class_str.'"><i class="fa fa-angle-right"></i></a>'; echo '<a href="./?page='.$page_file.'&curr_page='.($total_pages-1). $search_str.$sort_str.$class_str.'"><i class="fa fa-angle-double-right"></i></a>'; }else{ echo '<span class="spanarea"></span><span class="spanarea"></span>'; } ?> </div> <div> <?php //顯示頁數資訊 ================================= echo ($curr_page+1).' / '.$total_pages.' 頁'; ?> </div> </div>
<form method="post" action="">
<?php echo $row_RS_mem['mem_level']; ?>
<select name="mem_level">
<option value="0"
<?php if( $row_RS_mem['mem_level']==0 ){echo 'selected';} ?>>列入黑名單</option>
<option value="1"
<?php if( $row_RS_mem['mem_level']==1 ){echo 'selected';} ?>>申請未確認</option>
<option value="2"
<?php if( $row_RS_mem['mem_level']==2 ){echo 'selected';} ?>>已確認可登入</option>
<option value="9"
<?php if( $row_RS_mem['mem_level']==9 ){echo 'selected';} ?>>管理者身份</option>
</select>
<input type="submit" value="確定更改">
<input type="hidden" name="mem_id" value="<?php echo $row_RS_mem['mem_id']; ?>">
<input type="hidden" name="form-name" value="form-mem-level">
</form>
<?php if( isset($_POST['form-name']) && $_POST['form-name']=='form-mem-level' ){ try{ $sql_str = "UPDATE member SET mem_level = :mem_level, mem_time_m = :mem_time_m WHERE mem_id = :mem_id"; $stmt = $conn->prepare($sql_str); $mem_level = $_POST['mem_level']; $mem_id = $_POST['mem_id']; $mem_time_m = date('Y-m-d H:i:s'); $stmt->bindParam(':mem_level' ,$mem_level); $stmt->bindParam(':mem_time_m' ,$mem_time_m); $stmt->bindParam(':mem_id' ,$mem_id); $stmt->execute(); header('Location:./?page=admin_mem'); } catch (PDOException $e ){ die("Error!: ". $e->getMessage()); } } ?>
<h1 data-no="5">會員管理中心</h1> <div style="overflow:hidden;padding:5px"> <form method="get" action="" class="w3-right"> <input type="hidden" name="page" value="admin_mem"> <input type="text" name="search_keyword" style="width:22em" placeholder="會員關鍵字, 不輸入按「搜尋」則顯示全部..." > <input type="submit" value="搜尋"> </form> </div>
//判斷是否為搜尋關鍵字================================================== $where = ''; //SELECT中WHERE條件語法 $search_keyword = ''; //接收輸入查詢的關鍵字 $search_str =''; //頁碼連結時需帶著的參數及參數值:搜尋關鍵字 if( isset($_GET['search_keyword']) && $_GET['search_keyword']!='' ){ $search_keyword = $_GET['search_keyword']; $search_str = '&search_keyword='.$search_keyword; $where = " WHERE mem_name LIKE '%$search_keyword%' OR mem_mail LIKE '%$search_keyword%' "; }
表格欄位標題中先設計要取得的資訊
<table border="1" class="w3-table-all mem-table"> <tr> <th data-f="mem_name" data-s="ASC">會員[id]名稱 <span></span></th> <th data-f="mem_mail" data-s="ASC">會員帳號 <span></span></th> <th data-f="mem_time_c" data-s="ASC">會員註冊時間 <span></span></th> <th data-f="mem_time_m" data-s="ASC">最後處理時間 <span></span></th> <th data-f="mem_level" data-s="ASC">會員權限等級 <span></span></th> </tr>
<style> .mem-table th[data-f] { cursor: pointer; } .mem-table th .fa { font-size: 1.2em; } </style>
點選欄位標題時, 由 JS 程式先接收取得相關資訊, 再導引回本頁並且加上相關參數
<script> //當表格第一列的欄位標題位置click時, 決定排序的方式=============== $('.mem-table th[data-f]').click(function(){ var dataf = $(this).attr('data-f'); //取得欄位名稱 var datas = $(this).attr('data-s'); //取得排序依據 var sk = '<?php echo $search_keyword; ?>'; //取得搜尋關鍵字 var page_file = '<?php echo $page_file; ?>'; //取得頁碼連結的檔名 var goto = './?page='+page_file+'&dataf='+dataf+'&datas='+datas; if( sk!='' ){ goto+='&search_keyword='+sk; } window.location.href=goto; //導引到指定頁面及相關參數 }); //決定表格中欄位標題的排序icon================================= var $icona = '<i class="fa fa-sort-amount-asc"></i>'; //升冪的圖示 var $icond = '<i class="fa fa-sort-amount-desc"></i>'; //降冪的圖示 var $dataf = '<?php echo $dataf; ?>'; //取得排序依據的欄位名稱 var $datas = '<?php echo $datas; ?>'; //取得排序順序的依據 //讓表格中含有 data-f 屬性的 th, 逐一執行=================== $('.mem-table th[data-f]').each(function(i,obj){ //假如屬性data-f中的欄位名稱就是目前排序依據的欄位 //那麼就改變這個欄位中的 data-s, 以及顯示的 icon 圖示 if( $(obj).attr('data-f')==$dataf ){ if( $datas=='ASC' ){ $(obj).attr('data-s','DESC'); $(obj).children('span').html($icona); }else{ $(obj).attr('data-s','ASC'); $(obj).children('span').html($icond); } } }); </script>
//判斷排序的依據======================================================= $dataf = 'mem_time_m'; //排序依據的欄位 if( isset($_GET['dataf']) ){ $dataf = $_GET['dataf']; } $datas = 'DESC'; //排序依據的順序方向(a:ASC,d:DESC) if( isset($_GET['datas']) ){ $datas = $_GET['datas']; } $sort = 'ORDER BY '.$dataf.' '.$datas; //SELECT 中 ORDER BY 語法 $sort_str = '&dataf='.$dataf.'&datas='.$datas; //頁碼連結時需帶著的參數及參數值