.NET幫助

Jquery Datatable（開發者的工作原理）

更新:2025年9月1日

資料呈現是網頁開發中至關重要的一環，當處理表格式數據時，擁有一個具備互動性及豐富功能的表格是必要的。 jQuery DataTables 是一個強大的 JavaScript 程式庫，提供創建動態和響應式表格的高級功能。在本文中，我們將探討如何在 ASP.NET 網頁應用程序中整合與使用 jQuery DataTables，以加強表格式數據的展示。

如何在 ASP.NET 網頁應用程序中使用 jQuery DataTables？

創建或打開一個網頁應用程序。
安裝 Entity Framework 套件。
添加模型、DB 上下文和控制器。
添加 DB 連接字串並設置配置。
添加遷移並更新數據庫。
添加 jQuery DataTables 的用戶端程式庫。
添加 HTML 表格和 JavaScript 程式碼。
構建並運行應用程序。
使用 IronXL for Excel Manipulation 將數據匯出為 Excel。

什麼是 jQuery DataTables？

jQuery DataTables 是一個輕量化、靈活且功能豐富的 jQuery 插件，用於處理表格式數據。它提供了廣泛的功能，如排序、搜尋和分頁，使其成為展示大型數據集的理想選擇，並具備用戶友好的介面。

用戶端處理

在用戶端處理中，瀏覽器負責在本地處理數據集。 jQuery DataTables 通過其強大的功能，允許在使用者的瀏覽器中直接進行數據的動態交互和處理。雖然此方法在處理較小數據集時運行順暢，但在處理大型數據集時可能因性能瓶頸和資源消耗增加而面臨挑戰。

在本文中，我們將探討在 ASP.NET Razor Page 應用程序中進行用戶端處理，重點介紹其對較小數據集的優勢，並提供潛在考量與優化方法以確保流暢響應的用戶體驗。

在 ASP.NET 網頁應用程序中開始使用 jQuery DataTables

本文將使用目標為 .NET Framework 4.8 的 ASP.NET Razor Page 網頁應用程序。根據您的需求，您可以使用 Blazor、MVC 或 Web Forms。

本文將使用 Code First 方法。您可以根據偏好採用 Database First 方法。我們需要安裝以下套件以使用 Code First 方法。

Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools

使用 NuGet Package Manager Console 中的 Install-Package命令安裝上述套件，或直接在 NuGet Package Manager 解決方案中搜尋並安裝。

讓我們設置專案，添加模型類、ApplicationDbContext 類、控制器、連接字串以及 Program.cs 中的服務配置。

添加模型類別

我正在此示例中使用 Employee 模型類。您可以根據需求使用它。

public class Employee
{
    public int Id { get; set; }
    public string FirstName { get; set; } = string.Empty;
    public string LastName { get; set; } = string.Empty;
    public string Email { get; set; } = string.Empty;
    public string PhoneNumber { get; set; } = string.Empty;
    public string Gender { get; set; } = string.Empty;
    public string Designation { get; set; } = string.Empty;
}

public class Employee
{
    public int Id { get; set; }
    public string FirstName { get; set; } = string.Empty;
    public string LastName { get; set; } = string.Empty;
    public string Email { get; set; } = string.Empty;
    public string PhoneNumber { get; set; } = string.Empty;
    public string Gender { get; set; } = string.Empty;
    public string Designation { get; set; } = string.Empty;
}

$vbLabelText $csharpLabel

添加 ApplicationDbContext 類

我們需要添加 ApplicationDbContext 類以設置 Entity Framework。

public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
    {
    }

    public DbSet<Employee> Employees { get; set; }
}

public class ApplicationDbContext : DbContext
{
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)
    {
    }

    public DbSet<Employee> Employees { get; set; }
}

$vbLabelText $csharpLabel

添加 Employee Controller

添加 EmployeeController 以創建端點。

[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
    private readonly ApplicationDbContext _context;

    public EmployeeController(ApplicationDbContext context)
    {
        _context = context;
    }

    [HttpGet]
    public IActionResult GetEmployees()
    {
        try
        {
            var employeeData = _context.Employees.ToList();
            var jsonData = new { data = employeeData };
            return Ok(jsonData);
        }
        catch (Exception ex)
        {
            // Log exception here
            throw;
        }
    }
}

[Route("api/[controller]")]
[ApiController]
public class EmployeeController : ControllerBase
{
    private readonly ApplicationDbContext _context;

    public EmployeeController(ApplicationDbContext context)
    {
        _context = context;
    }

    [HttpGet]
    public IActionResult GetEmployees()
    {
        try
        {
            var employeeData = _context.Employees.ToList();
            var jsonData = new { data = employeeData };
            return Ok(jsonData);
        }
        catch (Exception ex)
        {
            // Log exception here
            throw;
        }
    }
}

$vbLabelText $csharpLabel

在此，我們使用 HttpGet 方法，因為我們將在客戶端檢索完整的數據，並在客戶端實現分頁、搜尋和排序。我們將返回一個將在客戶端呈現的 JSON 陣列。

添加連接字串

在 appsettings.json 文件中添加以下連接字串。

"ConnectionStrings": {
  "EmployeeDB": "Server=localserver\\SQLEXPRESS;Database=EmployeeDB;Trusted_Connection=True;MultipleActiveResultSets=true;TrustServerCertificate=True;"
}

在 Program.cs 類中 webApplication.CreateBuilder() 行下添加以下行以連接 SQL Server。

builder.Services.AddDbContext<ApplicationDbContext>(options =>
{
    options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"));
});

builder.Services.AddDbContext<ApplicationDbContext>(options =>
{
    options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"));
});

$vbLabelText $csharpLabel

運行遷移

下一步是運行遷移，因為我們正在使用 Code First 方法。在包管理器控制台中運行以下命令。

Add-Migration init

Add-Migration init

SHELL

此命令將創建一個遷移。現在，運行以下命令將此遷移應用到數據庫。

update-database

update-database

SHELL

現在，我們的專案設定完成，數據庫已準備就緒，我們只需要添加 jQuery 程式庫和 HTML 表格來準備 UI。在此示例中，我們使用了 SQL Server 作為數據來源，但您可以使用其他任何數據庫。

添加 jQuery DataTables 程式庫

我們需要在專案中添加 jQuery DataTables 程式庫，這是一個用於 jQuery JavaScript 庫的表格增強插件。我們可以右鍵單擊專案，選擇"添加"，然後選擇"添加用戶端程式庫"來添加它。一個小窗口將出現，我們可以搜尋"jquery datatables"並如下面所示安裝它：

添加 jQuery DataTables 程式庫

添加 HTML 表格

讓我們添加一個具有空表格主體的 HTML 表格。在設置 jQuery DataTable 時，我們將添加所需的列標題。在 Index.cshtml 文件中添加以下程式碼。

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<div class="container">
    <br />
    <div style="width:90%; margin:0 auto;">
        <table id="employeeDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
        </table>
    </div>
</div>
@section Scripts
{
    <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
    <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script>
    <script src="~/js/EmployeeDatatable.js"></script>
}

我們需要將 EmployeeDatatable.js 文件添加到 wwwroot/Js 資料夾中。在此文件中，我們將有一個 Ajax 調用和 jQuery DataTable 的高級功能，如過濾、分頁、搜尋、排序等。

創建 EmployeeDatatable.js 文件

在 wwwroot/Js 資料夾中創建一個 EmployeeDatatable.js 文件。添加以下程式碼。

$(document).ready(function () {
    $("#employeeDatatable").DataTable({
        "processing": true,
        "serverSide": false,
        "filter": true,
        "ajax": {
            "url": "/api/Employee",
            "type": "GET",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
        "columns": [
            { "data": "id", "title": "Employee ID", "name": "Employee ID", "autoWidth": true },
            { "data": "firstName", "title": "First Name", "name": "First Name", "autoWidth": true },
            { "data": "lastName", "title": "Last Name", "name": "Last Name", "autoWidth": true },
            { "data": "email", "title": "Email", "name": "Email", "autoWidth": true },
            { "data": "phoneNumber", "title": "Phone Number", "name": "Phone Number", "autoWidth": true },
            { "data": "gender", "title": "Gender", "name": "Gender", "autoWidth": true },
            { "data": "designation", "title": "Designation", "name": "Designation", "autoWidth": true }
        ]
    });
});

$(document).ready(function () {
    $("#employeeDatatable").DataTable({
        "processing": true,
        "serverSide": false,
        "filter": true,
        "ajax": {
            "url": "/api/Employee",
            "type": "GET",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
        "columns": [
            { "data": "id", "title": "Employee ID", "name": "Employee ID", "autoWidth": true },
            { "data": "firstName", "title": "First Name", "name": "First Name", "autoWidth": true },
            { "data": "lastName", "title": "Last Name", "name": "Last Name", "autoWidth": true },
            { "data": "email", "title": "Email", "name": "Email", "autoWidth": true },
            { "data": "phoneNumber", "title": "Phone Number", "name": "Phone Number", "autoWidth": true },
            { "data": "gender", "title": "Gender", "name": "Gender", "autoWidth": true },
            { "data": "designation", "title": "Designation", "name": "Designation", "autoWidth": true }
        ]
    });
});

JAVASCRIPT

我們已經利用了功能豐富的 jQuery DataTables 程式庫。這個強大的 jQuery 插件允許我們在用戶端以最小努力實現高級功能。

現在，構建並運行此應用程式。

輸出

藉助 jQuery 在 ASP.NET 中，我們可以看到我們擁有一個非常互動的 UI。顯示的數據如下：

jQuery DataTables 輸出

現在，分頁在用戶端實現，因此完整數據從伺服器傳送，如下圖所示：

輸出UI

我們可以搜尋、排序和更改頁面，所有操作都將在用戶端執行，如下圖所示：

輸出UI

IronXL 簡介

IronXL for .NET Excel File Manipulation 是一個允許您在 .NET 應用程式中操作 Excel 文件的程式庫。它可以創建、讀取、編輯和儲存以 XLS、XLSX、CSV 和 TSV 等格式的 Excel 文檔。它不需要安裝 Microsoft Office 或 Excel Interop。它支持 .NET 5、Core、Framework 和 Azure。

我們經常需要將資料導出到Excel或CSV檔案中。 IronXL是最佳選擇。現在，我們將編寫程式碼將數據匯出為 Excel 文件。

安裝IronXL

在專案中通過在 Package Manager Console 中鍵入以下命令來安裝 IronXL 程式庫。

Install-Package IronPdf

這將在我們的專案中安裝IronXL和所需的依賴項。您也可以直接在 IronXL NuGet Package 中下載它。

將資料導出到Excel

讓我們編寫程式碼將我們的員工列表轉換為 Excel 文件。

public void ExportToExcel(List<Employee> employeeList)
{
    // Create a new workbook instance
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    // Get the default worksheet
    WorkSheet ws = wb.DefaultWorkSheet;

    // Add Header Row
    ws["A1"].Value = "Employee ID";
    ws["B1"].Value = "First Name";
    ws["C1"].Value = "Last Name";
    ws["D1"].Value = "Designation";
    ws["E1"].Value = "Gender";
    ws["F1"].Value = "Phone Number";
    ws["G1"].Value = "Email";

    int rowCount = 2;

    // Add Data Rows
    foreach (Employee employee in employeeList)
    {
        ws["A" + rowCount].Value = employee.Id.ToString();
        ws["B" + rowCount].Value = employee.FirstName;
        ws["C" + rowCount].Value = employee.LastName;
        ws["D" + rowCount].Value = employee.Designation;
        ws["E" + rowCount].Value = employee.Gender;
        ws["F" + rowCount].Value = employee.PhoneNumber;
        ws["G" + rowCount].Value = employee.Email;

        rowCount++;
    }

    // Save the workbook as an Excel file
    wb.SaveAs("Employee.xlsx");
}

public void ExportToExcel(List<Employee> employeeList)
{
    // Create a new workbook instance
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    // Get the default worksheet
    WorkSheet ws = wb.DefaultWorkSheet;

    // Add Header Row
    ws["A1"].Value = "Employee ID";
    ws["B1"].Value = "First Name";
    ws["C1"].Value = "Last Name";
    ws["D1"].Value = "Designation";
    ws["E1"].Value = "Gender";
    ws["F1"].Value = "Phone Number";
    ws["G1"].Value = "Email";

    int rowCount = 2;

    // Add Data Rows
    foreach (Employee employee in employeeList)
    {
        ws["A" + rowCount].Value = employee.Id.ToString();
        ws["B" + rowCount].Value = employee.FirstName;
        ws["C" + rowCount].Value = employee.LastName;
        ws["D" + rowCount].Value = employee.Designation;
        ws["E" + rowCount].Value = employee.Gender;
        ws["F" + rowCount].Value = employee.PhoneNumber;
        ws["G" + rowCount].Value = employee.Email;

        rowCount++;
    }

    // Save the workbook as an Excel file
    wb.SaveAs("Employee.xlsx");
}

$vbLabelText $csharpLabel

我們已經以一種簡單易用的方式從列表中創建了一個 Excel 文件。

輸出 Excel 文件

IronXL 提供全面的創建 XLSX 文件的教程、閱讀 Excel 文件的程式碼示例和詳細文檔，幫助您以最佳方式利用其全面的 API。

結論

總之，jQuery DataTables 成為在 ASP.NET 網頁應用程式中轉變表格式數據展示的強大資產。其輕量卻功能豐富的特性促進了互動表格的創建，將排序、搜尋和分頁置於前沿。我們探討了用戶端處理的細節，利用瀏覽器的能力來處理較小的數據集，同時認識到處理大型數據集可能面臨的挑戰。設置 ASP.NET Razor Page 應用程式並整合 jQuery DataTables 的逐步指南為開發者提供了實用見解。此外，IronXL 作為處理 Excel 相關任務的無縫解決方案的引入，為工具包增加了一層價值，使得數據匯出更加高效。憑藉這些工具，開發者可以通過吸引人且易於訪問的方式展示數據，提高用戶體驗。

IronXL 根據開發者數量、專案和再分發需求提供各種授權選項。這些授權是永久性的，並包括免費支援和更新。

常見問題解答

jQuery DataTables 如何在 ASP.NET 網路應用程序中提升數據展示？

jQuery DataTables 通過提供排序、搜尋和分頁等功能，增強數據展示，使用戶更容易在響應式和用戶友好的方式中互動大量數據集。

將 jQuery DataTables 集成到 ASP.NET Razor Page 應用程序的基本步驟是什麼？

要在 ASP.NET Razor Page 應用程序中集成 jQuery DataTables，首先設置模型、DbContext 和控制器，配置數據庫連接，並運用代碼優先（Code-First）方法和 Entity Framework 實施客戶端數據處理來高效管理數據。

在管理大量數據集時，服務端處理如何有利於 jQuery DataTables？

服務端處理通過將數據操作委託給服務器來提升性能和效率，特別是在處理大量數據集時，相比之下客戶端處理可能在處理大量數據時變得緩慢。

IronXL 在從 ASP.NET 應用程序導出數據到 Excel 中扮演什麼角色？

IronXL 允許開發者通過創建新的工作簿，從數據集填充數據行，並保存為 Excel 文件來導出數據到 Excel。它簡化了 Excel 文件的操作，而無需使用 Microsoft Office。

是否可以在 .NET 應用程序中處理 Excel 文件而不使用 Microsoft Office？

是的，IronXL 使 .NET 應用程序可以獨立於 Microsoft Office 工作於 Excel 文件，支持多種格式如 XLS、XLSX、CSV 和 TSV。

用於 .NET 項目中的 IronXL 的許可選項有哪些？

IronXL 根據開發人員數量、項目和分發要求提供各種許可選項。許可是永久的，包括免費支持和更新。

在 ASP.NET 中使用 jQuery DataTables 的代碼優先（Code-First）方法的優勢是什麼？

在 ASP.NET 中使用 jQuery DataTables 的代碼優先方法支持易於設置和配置數據庫模型和上下文，允許動態數據管理和前端 DataTables 的集成以增強交互性。

如何在 ASP.NET 應用程序中排除 jQuery DataTables 的常見問題？

可通過確認包含正確的腳本和樣式表、驗證數據源路徑、檢查控制台錯誤以解決 JavaScript 問題，並確認正確的服務器端處理設置來排除 jQuery DataTables 的常見問題。

Jacob Mellor

立即與工程團隊聊天

首席技術官

Jacob Mellor是Iron Software的首席技術官，也是開創C# PDF技術的前瞻性工程師。作為Iron Software核心代碼庫的原始開發者，他自公司成立以來就塑造了公司的產品架構，並與CEO Cameron Rimington將公司轉型為服務NASA、Tesla以及全球政府機構的50多人公司。

Jacob擁有曼徹斯特大學土木工程一級榮譽學士學位（1998年–2001年）。他於1999年在倫敦開立首家軟體公司，並於2005年建立了他的第一個.NET組件，專注於解決Microsoft生態系統中的複雜問題。

他的旗艦作品IronPDF和Iron Suite .NET程式庫全球已獲得超過3000萬次NuGet安裝，他的基礎代碼不斷在全球各地驅動開發者工具。擁有25年以上的商業經驗和41年的編碼專業知識，Jacob仍然專注於推動企業級C#、Java和Python PDF技術的創新，同時指導下一代技術領導者。

更新2026年2月20日

銜接 CLI 簡化與 .NET : 使用 Curl DotNet 與 IronPDF for .NET

Jacob Mellor 藉由 CurlDotNet 彌補了這方面的不足，CurlDotNet 是為了讓 .NET 生態系統能熟悉 cURL 而建立的函式庫。

更新2025年12月20日

RandomNumberGenerator C#

使用RandomNumberGenerator C#類可以幫助將您的PDF生成和編輯項目提升至新水準

更新2025年12月20日

C#字符串等於（它如何對開發者起作用）

當結合使用強大的PDF庫IronPDF時，開關模式匹配可以讓您構建更智能、更清晰的邏輯來進行文檔處理

C# 陣列排序（開發者的工作原理）

C# Stopwatch（開發者的工作�...

客戶亮點：

開發者焦點：

網路研討會：

立即開始30天免費試用

Jquery Datatable（開發者的工作原理）

如何在 ASP.NET 網頁應用程序中使用 jQuery DataTables？

什麼是 jQuery DataTables？

用戶端處理

在 ASP.NET 網頁應用程序中開始使用 jQuery DataTables

添加模型類別

添加 ApplicationDbContext 類

添加 Employee Controller

添加連接字串

運行遷移

添加 jQuery DataTables 程式庫

添加 HTML 表格

創建 EmployeeDatatable.js 文件

輸出

輸出UI

IronXL 簡介

安裝IronXL

將資料導出到Excel

結論

常見問題解答

jQuery DataTables 如何在 ASP.NET 網路應用程序中提升數據展示？

將 jQuery DataTables 集成到 ASP.NET Razor Page 應用程序的基本步驟是什麼？

在管理大量數據集時，服務端處理如何有利於 jQuery DataTables？

IronXL 在從 ASP.NET 應用程序導出數據到 Excel 中扮演什麼角色？

是否可以在 .NET 應用程序中處理 Excel 文件而不使用 Microsoft Office？

用於 .NET 項目中的 IronXL 的許可選項有哪些？

在 ASP.NET 中使用 jQuery DataTables 的代碼優先（Code-First）方法的優勢是什麼？

如何在 ASP.NET 應用程序中排除 jQuery DataTables 的常見問題？

Iron Support Team

立即開始30天免費試用

Jquery Datatable（開發者的工作原理）

如何在 ASP.NET 網頁應用程序中使用 jQuery DataTables？

什麼是 jQuery DataTables？

用戶端處理

在 ASP.NET 網頁應用程序中開始使用 jQuery DataTables

添加模型類別

添加 ApplicationDbContext 類

添加 Employee Controller

添加連接字串

運行遷移

添加 jQuery DataTables 程式庫

添加 HTML 表格

創建 EmployeeDatatable.js 文件

輸出

輸出UI

IronXL 簡介

安裝IronXL

將資料導出到Excel

結論

常見問題解答

jQuery DataTables 如何在 ASP.NET 網路應用程序中提升數據展示？

將 jQuery DataTables 集成到 ASP.NET Razor Page 應用程序的基本步驟是什麼？

在管理大量數據集時，服務端處理如何有利於 jQuery DataTables？

IronXL 在從 ASP.NET 應用程序導出數據到 Excel 中扮演什麼角色？

是否可以在 .NET 應用程序中處理 Excel 文件而不使用 Microsoft Office？

用於 .NET 項目中的 IronXL 的許可選項有哪些？

在 ASP.NET 中使用 jQuery DataTables 的代碼優先（Code-First）方法的優勢是什麼？

如何在 ASP.NET 應用程序中排除 jQuery DataTables 的常見問題？

相關文章

銜接 CLI 簡化與 .NET : 使用 Curl DotNet 與 IronPDF for .NET

RandomNumberGenerator C#

C#字符串等於（它如何對開發者起作用）

下一步：開始30天免費試用

下一步：開始30天免費試用

深受全球數百萬工程師信賴

Iron Support Team