JS 實現「上一頁/下一頁」導航的正確姿勢

常見誤區

• <a href="#" onclick="back"> 中 onclick 拼寫錯誤（應為 onclick），且 back 未定義。
• 直接使用 history.back() 可能因表單提交導致 405 錯誤（GET vs POST 不匹配）。

推薦方案：AJAX 無刷新分頁

參考最佳回答，使用 jQuery 封裝分頁邏輯，透過 $.post 向後端請求資料，回調中動態重建分頁導航列（含首頁、上一頁、頁碼、下一頁、尾頁、跳轉輸入框）。核心流程：

1. 定義 pageSkip(pageNumber) 觸發查詢。
2. showCategory(pageSize, pageNo) 發送 POST 請求，攜帶分頁參數。
3. 成功回調中根據 totalPage 動態生成 <a> 標籤，並綁定點擊事件呼叫 pageSkip。
4. 當前頁加上 currentPage 樣式高亮。

關鍵代碼結構

$.pageSkip = function(pageNumber) {
    showCategory("", $(".current").html(), pageNumber, "");
};
function showCategory(pageSize, pageNo) {
    $.post('/shop/queryCategoryAction', { "page.pageSize": pageSize, "page.pageNo": pageNo }, function(d) {
        var totalPage = d.totalPage;
        var pager = $("#pager").empty();
        // 生成首頁、上一頁、頁碼迴圈、下一頁、尾頁、跳轉框...
        // 每個 <a> 點擊呼叫 $.pageSkip(對應頁碼)
    });
}

此模式適用於任何需要 POST 分頁的場景，避免瀏覽器歷史堆疊混亂。