ASP.NET 使用 jQuery Pagination 插件實現無刷新分頁

前言

本文介紹如何在 ASP.NET Web Forms 中整合 jquery.pagination.js 插件，搭配 Generic Handler (.ashx) 實現無刷新分頁功能。文中也說明大數據量時建議回傳 JSON 而非 HTML 片段以提升效能。

插件主要參數

• callback：分頁點擊時觸發的函式
• items_per_page：每頁顯示筆數
• num_display_entries：中間顯示的頁碼數量
• num_edge_entries：兩側首尾顯示的頁碼數量
• prev_text、next_text：上一頁/下一頁按鈕文字

完整實作步驟

1. 前端頁面 Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Pagination 無刷新分頁示範</title>
    <script src="Script/jquery-1.4.1.min.js"></script>
    <script src="Script/jquery.pagination.js"></script>
    <script src="Script/tablecloth.js"></script>
    <link href="Style/tablecloth.css" rel="stylesheet" />
    <link href="Style/pagination.css" rel="stylesheet" />
    <script type="text/javascript">
        var pageIndex = 0;
        var pageSize = 10;

        $(function () {
            InitTable(0); // 初始載入第一頁

            // 初始化分頁元件
            $("#Pagination").pagination(<%= pageCount %>, {
                callback: PageCallback,
                prev_text: '上一頁',
                next_text: '下一頁',
                items_per_page: pageSize,
                num_display_entries: 6,
                current_page: pageIndex,
                num_edge_entries: 2
            });
        });

        // 分頁回呼函式
        function PageCallback(index, jq) {
            InitTable(index);
        }

        // 透過 AJAX 向 Handler 取得資料
        function InitTable(pageIndex) {
            $.ajax({
                type: "POST",
                dataType: "html", // 此處 Handler 回傳 HTML 片段，大量資料建議改為 json
                url: 'Handler/PagerHandler.ashx',
                data: { pageIndex: pageIndex + 1, pageSize: pageSize },
                success: function (data) {
                    $("#Result tr:gt(0)").remove(); // 移除表頭以外的列
                    $("#Result").append(data); // 附加新資料
                },
                error: function (xhr) {
                    console.error("分頁載入失敗：" + xhr.statusText);
                }
            });
        }
    </script>
</head>
<body>
    <div align="center"><h1>無刷新分頁示範</h1></div>
    <div id="container">
        <table id="Result" cellspacing="0" cellpadding="0">
            <tr><th>編號</th><th>名稱</th></tr>
        </table>
        <div id="Pagination"></div>
    </div>
</body>
</html>

2. 後端 Default.aspx.cs - 提供總筆數

public partial class _Default : System.Web.UI.Page
{
    public string pageCount = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // 取得總筆數供前端分頁元件初始化
            pageCount = new PagerTestBLL.PersonManager().GetPersonCount().ToString();
        }
    }
}

3. 處理分頁請求的 Handler - PagerHandler.ashx

<%@ WebHandler Language="C#" Class="PagerHandler" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Text;
using PagerTestModels;
using PagerTestBLL;

public class PagerHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/html; charset=utf-8";

        int pageIndex = 1;
        int.TryParse(context.Request["pageIndex"], out pageIndex);
        int pageSize = Convert.ToInt32(context.Request["pageSize"]);

        int totalCount;
        // 假設 BLL 方法支援分頁查詢：GetAllPerson(pageSize, pageIndex, filter, out totalCount)
        List<Person> list = new PersonManager().GetAllPerson(pageSize, pageIndex, "", out totalCount);

        StringBuilder sb = new StringBuilder();
        foreach (var p in list)
        {
            sb.AppendFormat("{0}{1}", p.Id, p.Name);
        }
        context.Response.Write(sb.ToString());
    }

    public bool IsReusable { get { return false; } }
}

效能優化建議

範例中 Handler 直接拼接 HTML 字串回傳，適合小資料量。若資料量大或版面常變，建議：

1. Handler 回傳 JSON 格式資料（如 { rows: [...], total: 100 }）。
2. 前端使用 dataType: "json" 接收，透過 JavaScript 模板引擎（如 template.js、Mustache 或 ES6 Template Literals）動態渲染 HTML。
3. 減少網路傳輸量，分離資料與呈現邏輯，利於維護。

總結

透過 jquery.pagination.js 搭配 ASP.NET Generic Handler，可快速實現無刷新分頁體驗。專案實務上請根據資料量與維護需求，選擇回傳 HTML 片段或 JSON 資料。