PHP 文章置頂功能實作：資料庫欄位設計、排序邏輯與 AJAX 操作

前言

文章置頂是 CMS 常見需求。本文示範以兩個欄位 top (timestamp) + flag (tinyint) 實作置頂狀態與時間記錄，前端 AJAX 切換狀態，後端 SQL 排序 ORDER BY flag DESC, top DESC, id DESC 實現置頂文章優先顯示。

一、資料庫欄位設計

ALTER TABLE `article` 
  ADD COLUMN `flag` TINYINT(1) NOT NULL DEFAULT 0 COMMENT '置頂標記 1=置頂 0=正常',
  ADD COLUMN `top` TIMESTAMP NULL DEFAULT NULL COMMENT '置頂操作時間';

• flag：快速篩選置頂與否，索引效能佳。
• top：記錄置頂時間，支援同層級置頂文章按時間倒序。

二、後端列表查詢排序

$sql = "SELECT * FROM article WHERE status=1 ORDER BY flag DESC, top DESC, id DESC";

• flag DESC：置頂 (1) 排在正常 (0) 之前。
• top DESC：同為置頂者，最新置頂在最上。
• id DESC：最終兜底，確保順序確定性。

三、前端模板：置頂/取消置頂切換連結

<td class="center">
  {if $article.flag}
    <a href="javascript:void(0);" onclick="toggleTop({$article.id}, 0)">取消置頂</a>
  {else}
    <a href="javascript:void(0);" onclick="toggleTop({$article.id}, 1)">置頂</a>
  {/if}
</td>

四、JavaScript AJAX 處理

function toggleTop(id, flag) {
  $.ajax({
    type: 'POST',
    url: '?m=article&a=savePost', // 根據實際路由調整
    data: { id: id, flag: flag },
    dataType: 'json',
    success: function(res) {
      if (res.status === 'true') {
        location.reload(); // 簡單重整，或局部更新 DOM
      } else {
        alert(res.message || '操作失敗');
      }
    },
    error: function() { alert('網路錯誤'); }
  });
}

五、後端處理 savePost 動作

public function savePost() {
  $id = (int)$_POST['id'];
  $flag = (int)$_POST['flag'];
  
  if ($flag === 1) {
    // 置頂：更新 flag=1、top=當前時間
    $sql = "UPDATE article SET flag=1, top=NOW() WHERE id=$id";
  } else {
    // 取消置頂：flag=0、top=NULL
    $sql = "UPDATE article SET flag=0, top=NULL WHERE id=$id";
  }
  
  $result = $this->db->query($sql);
  echo json_encode([
    'status' => $result ? 'true' : 'false',
    'message' => $result ? '' : '資料庫更新失敗'
  ]);
}

六、進階擴充：多級置頂（全站置頂、分類置頂、推薦位）

ALTER TABLE `article`
  ADD COLUMN `top_level` TINYINT NOT NULL DEFAULT 0 COMMENT '0=無 1=分類置頂 2=全站置頂',
  ADD COLUMN `top_weight` INT NOT NULL DEFAULT 0 COMMENT '同級權重，越大越前';

排序邏輯擴充：ORDER BY top_level DESC, top_weight DESC, flag DESC, top DESC, id DESC。

七、前端體驗優化

• 操作成功後以 $.notify() 或 toastr 顯示提示，避免 alert() 阻塞。
• 列表頁以圖釘圖示 <i class="fa fa-thumb-tack"> 標示置頂文章。
• 支援批次操作：Checkbox 全選 + 下拉選單「置頂/取消置頂」+ 批次 AJAX。

八、結語

兩個欄位、一行 SQL 排序、一組 AJAX 互動，即可完成文章置頂核心功能。關鍵在於 flag 快速分組、top 精確排序、前後端狀態同步。擴充多級置頂時，善用 top_level + top_weight 即可靈活應對各種推薦邏輯。