PHP 搜索分頁跳轉保持查詢條件的 JavaScript 實現方案

問題背景

列表頁搜索後點擊「下一頁」，URL 無查詢參數導致返回第一頁數據。需在分頁鏈接中攜帶搜索條件。

核心 JS 邏輯

// 1. 搜索按鈕點擊：序列化表單 → 拼接 URL → 跳轉
$("#search").click(function() {
    const url = $(this).attr('url'); // 基礎列表頁 URL
    let query = $('.search-form').find('input, select, textarea').serialize();
    
    // 過濾空值參數
    query = query.replace(/(&|^)([^=]+=)(&|$)/g, '$1') // 移除 key= 空值
                 .replace(/^&/, '');                     // 移除首部 &
    
    const separator = url.includes('?') ? '&' : '?';
    window.location.href = url + separator + query;
});

// 2. 回車鍵觸發搜索
$(".search-form").keyup(function(e) {
    if (e.keyCode === 13) { // Enter
        $("#search").click();
        return false;
    }
});

HTML 搜索表單

分頁鏈接生成（PHP 端）

分頁組件需感知當前查詢參數，生成帶條件的鏈接：

">

現代化改進：URLSearchParams API

// 原生 JS，無需 jQuery
document.getElementById('search').addEventListener('click', () => {
    const baseUrl = this.dataset.url;
    const form = document.querySelector('.search-form');
    const formData = new FormData(form);
    const params = new URLSearchParams();
    
    for (const [key, value] of formData) {
        if (value.trim() !== '') params.append(key, value);
    }
    
    const url = new URL(baseUrl, window.location.origin);
    url.search = params.toString();
    location.href = url.toString();
});

// 回車搜索
document.querySelector('.search-form').addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        e.preventDefault();
        document.getElementById('search').click();
    }
});

總結

1. 搜索提交：序列化表單 → 過濾空值 → 拼接到列表頁 URL → 跳轉。
2. 分頁鏈接：PHP 生成時自動保留 $_GET 參數，只替換頁碼參數。
3. 回車體驗：綁定 keydown 事件觸發搜索按鈕。
4. 現代化：優先使用 URLSearchParams + URL API，無依賴、更健壯。