WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

6-2. 加強欄位排序靈活運用

當資料以清單列表時, 常常會有這樣的需求:讓操作者靈活地點選決定以哪個欄位來排序。

先以後台會員管理清單來練習, 接著可以舉一反三地練習新訊管理清單。

 

講義參考用,要活用變化,或許要修改喔~

(1) 在 admin_mem.php 以分頁方式列出會員清單

<?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());
}
?>
<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>

(2) 會員權限等級的修改

<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());
  }
}
?>

(3) 加上關鍵字搜尋功能

<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%' ";
}

(4) 設計管理者可以點選各欄位標題名稱來改變排序方式

表格欄位標題中先設計要取得的資訊

<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;  //頁碼連結時需帶著的參數及參數值

 

go TOP