JSP 實戰：分頁、搜索與列表批量刪除完整前端代碼解析

JSP 實戰：分頁、搜索與列表批量刪除完整前端代碼解析

本文提供一個基於原生 JSP + JavaScript 的經典員工管理列表示例，涵蓋**條件搜索、全選/反選、批量刪除確認、分頁導航**四大核心功能，代碼結構清晰，適合初學者理解 Web 交互基礎邏輯。

一、頁面整體架構

• 搜索區塊：員工編號、姓名輸入框，表單提交至 select.jsp
• 操作工具欄：批量刪除（JS 確認彈窗）、新增跳轉
• 數據表格：表頭全選框、數據行勾選框、序號、姓名、單行修改/刪除鏈接
• 分頁導航：首頁、上一頁、下一頁、尾頁、頁碼顯示、跳轉輸入框

二、核心 JavaScript 邏輯深度解析

1. 全選/反選

function chkall() {
    var chkall = document.getElementById("chksall");
    var chks = document.getElementsByName("chks");
    for (var i = 0; i < chks.length; i++) {
        chks[i].checked = chkall.checked;
    }
}

通過 ID 獲取「全選」框，Name 獲取所有行勾選框，同步 checked 狀態。

2. 批量刪除 ID 拼接與跳轉

function delchk() {
    var ids = "";
    var chks = document.getElementsByName("chks");
    for (var i = 0; i < chks.length; i++) {
        if (chks[i].checked) {
            ids += chks[i].value + ",";
        }
    }
    alert(ids); // 調試用
    window.location.href = "delall.jsp?ids=" + ids;
}

遍歷勾選框，拼接 value（員工編號）為逗號分隔字串，攜帶參數跳轉至後端處理頁。實際項目建議改用 POST 表單提交，避免 URL 長度限制與安全風險。

三、JSP 關鍵代碼片段

搜索表單

<form action="select.jsp" method="post">
    員工序號:<input type="text" name="nums">
    員工姓名:<input type="text" name="ename">
    <input type="submit" value="查詢">
</form>

批量刪除鏈接（內聯 JS 確認）

<a href="javascript:if(window.confirm('是否批量刪除')){delchk();}">批量刪除</a>

數據行渲染（含單行操作）

<tr>
    <td><input type="checkbox" name="chks" value="1004"></td>
    <td>1004</td>
    <td>大喬</td>
    <td>
        <a href="modify.jsp?modify=0&&nums=1004&&ename=大喬">修改</a>
        <a href="del.jsp?num=1004">刪除</a>
    </td>
</tr>

注意：URL 參數分隔符應為單一 &，示例中 && 為寫法錯誤，實際會導致參數解析異常。

分頁導航

<tr>
    <td><a href="index.jsp?pageNum=1">首頁</a></td>
    <td><a href="index.jsp?pageNum=0">上一頁</a></td>
    <td><a href="index.jsp?pageNum=2">下一頁</a></td>
    <td><a href="index.jsp?pageNum=3">尾頁</a></td>
    <td>第1頁 &nbsp;共 3 頁&nbsp; 9條&nbsp; 當前3 條</td>
</tr>

四、改進建議與現代化替代方案

五、總結

此示例雖屬「古典」JSP 模式，但完整展示了列表頁核心交互閉環：**查詢 → 選中 → 批量操作 → 分頁流轉**。理解這套原生邏輯，有助於深入掌握前後端數據流向，為後續學習現代前端框架、RESTful API 設計打下堅實基礎。