.NET 幫助

Jquery Datatable（如何為開發者運作）

發佈 2024年1月27日

數據呈現是網頁開發中非常關鍵的方面，當處理表格數據時，擁有一個互動且功能豐富的表格是必不可少的。 jQueryDataTables 是一個功能強大的 JavaScript 函式庫，提供了用於創建動態和響應式表格的進階功能。本文將探討如何在專案中整合和使用 jQuery DataTables。ASP.NET網頁應用程式以提升表格數據的呈現。

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

創建或開啟網路應用程式。
安裝 Entity Framework 套件。
新增模型、資料庫上下文和控制器。
新增資料庫連接字串並設置配置。
新增遷移並更新資料庫。
添加 jQuery DataTables 的客戶端庫。
新增 HTML 表格和 JavaScript 代碼。
建立並執行應用程式。
使用 IronXL 將數據匯出至 ExcelIronXL 用於 Excel 操作.

什麼是 jQuery DataTables？

jQuery DataTables 是一個輕量級、靈活且功能豐富的 jQuery 插件，用於處理表格數據。它提供了多種功能，例如排序、搜尋、分頁等，使其成為以用戶友好的方式展示大型數據集的理想選擇。

客户端处理

在客戶端處理中，瀏覽器獲得處理本地資料集的能力。 jQuery DataTables 憑藉其強大的功能，允許在使用者的瀏覽器中直接進行數據的動態交互和操作。雖然這種方法對於較小的數據集可以無縫運作，但在處理大型數據集時可能會面臨潛在的性能瓶頸和資源消耗增加的挑戰。

在本文中，我們將探討ASP.NET Razor Page應用程式中的客戶端處理功能，強調它對於較小的數據集所提供的優勢，並提供潛在考量和優化的見解，以確保流暢且回應迅速的用戶體驗。

開始在 ASP.NET 網路應用程式中使用 jQuery DataTables

本文將使用針對 .NET Framework 4.8 的 ASP.NET Razor 頁面網路應用程式。您可以根據需求使用 Blazor、MVC 或 Web Forms。

這篇文章將使用代碼優先的方法。您可以根據個人喜好使用資料庫優先的方法。我們需要安裝以下套件以使用代碼優先方法。

Microsoft.EntityFrameworkCore
Microsoft.EntityFrameworkCore.Design
Microsoft.EntityFrameworkCore.SqlServer
Microsoft.EntityFrameworkCore.Tools
使用 NuGet 套件管理器控制台的 Install-Package 命令安裝上述套件，或在 NuGet 套件管理器解決方案中搜尋並安裝它們。
讓我們透過在 Program.cs 中添加 Model 類別、ApplicationDBContext 類別、控制器、連接字串和服務配置來設置專案。

添加模型類別

我正在使用 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;
}

Public Class Employee
	Public Property Id() As Integer
	Public Property FirstName() As String = String.Empty
	Public Property LastName() As String = String.Empty
	Public Property Email() As String = String.Empty
	Public Property PhoneNumber() As String = String.Empty
	Public Property Gender() As String = String.Empty
	Public Property Designation() As String = String.Empty
End Class

VB C#

添加 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; }
}

Public Class ApplicationDbContext
	Inherits DbContext

	Public Sub New(ByVal options As DbContextOptions(Of ApplicationDbContext))
		MyBase.New(options)
	End Sub

	Public Property Employees() As DbSet(Of Employee)
End Class

VB C#

新增員工控制器

添加 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)
        {
            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)
        {
            throw;
        }
    }
}

<Route("api/[controller]")>
<ApiController>
Public Class EmployeeController
	Inherits ControllerBase

	Private ReadOnly _context As ApplicationDbContext

	Public Sub New(ByVal context As ApplicationDbContext)
		_context = context
	End Sub

	<HttpGet>
	Public Function GetEmployees() As IActionResult
		Try
			Dim employeeData = _context.Employees.ToList()
			Dim jsonData = New With {Key .data = employeeData}
			Return Ok(jsonData)
		Catch ex As Exception
			Throw
		End Try
	End Function
End Class

VB C#

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

新增連接字串

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

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

在 webApplication.CreateBuilder 下的 Program.cs 類中添加以下行()使用這條線連接至 SQL Server。

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

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

builder.Services.AddDbContext(Of ApplicationDbContext)(Sub(options)
	options.UseSqlServer(builder.Configuration.GetConnectionString("EmployeeDB"))
End Sub)

VB C#

運行遷移

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

Add-Migration init

此命令將創建一個遷移。現在，執行以下命令將此遷移套用到資料庫。

update-database

既然我們的專案已設置好，資料庫也準備就緒，我們只需要新增 jQuery 庫和 HTML 表格來準備我們的使用者介面。在此範例中，我們使用了 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>
}

我們需要在 wwwroot/Js 資料夾內添加 EmployeeDatatable.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 中，我們已經準備好了非常互動的使用者介面。顯示的數據如下：

jQuery DataTables 輸出

現在，分頁在客戶端實施，因此從伺服器發送完整的數據，如下所示：

輸出用戶界面

我們可以在客戶端進行搜尋、排序和換頁，如下所示：

輸出用戶界面

IronXL 介紹

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

我們經常需要將數據導出到 Excel 或 CSV 文件。在這種情況下，IronXL 是最佳選擇。接下來，我們將編寫代碼將我們的數據匯出到 Excel 文件中。

安裝 IronXL

在套件管理器主控台中輸入以下命令來安裝 IronXL 庫到您的專案。

Install-Package IronXL.Excel

這將在我們的專案中安裝 IronXL 和所需的依賴項。您也可以直接從IronXL NuGet 套件.

匯出資料至Excel

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

public void ExportToExcel(List<Employee> employeeList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    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
    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++;
    }

    wb.SaveAs("Employee.xlsx");
}

public void ExportToExcel(List<Employee> employeeList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX);
    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
    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++;
    }

    wb.SaveAs("Employee.xlsx");
}

Public Sub ExportToExcel(ByVal employeeList As List(Of Employee))
	Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX)
	Dim ws As WorkSheet = 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"

	Dim rowCount As Integer = 2

	' Add Data
	For Each employee As 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 += 1
	Next employee

	wb.SaveAs("Employee.xlsx")
End Sub

VB C#

我們以簡單易懂的方式從清單中創建了一個 Excel 文件。

輸出 Excel 檔案

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

結論

總之，jQuery DataTables 已經成為改變 ASP.NET 網頁應用程式中表格資料呈現的強大工具。其輕量卻功能豐富的特性使得創建互動式表格更加方便，將排序、搜尋和分頁功能帶到前端。我們探討了客戶端處理的細微差別，利用瀏覽器的功能處理較小的資料集，同時承認大資料量可能帶來的挑戰。設定 ASP.NET Razor Page 應用程式並整合 jQuery DataTables 的逐步指南為開發人員提供了實用的洞察。此外，引入IronXL作為Excel相關任務的無縫解決方案，為工具包增加了一個有價值的層次，使得數據匯出更加高效。配備這些工具，開發人員可以通過以引人入勝且易於接近的方式呈現數據來提升用戶體驗。

IronXL 提供多種授權選項，根據開發者數量、專案和再發行需求而定。許可證是永久的，並包括免費的支持和更新。

< 上一頁
C# 陣列排序（開發者是如何工作的）

下一個 >
C# 計時器（它如何對開發者運作）