Ikona wiadomości
Przejdź do treści stopki
  1. IronPDF
  2. Blog IronPDF
  3. Pomoc .NET
  4. Jquery Datatable
POMOC .NET

Jquery Datatable (jak to działa dla programistów)

Jacob Mellor, Dyrektor Technologiczny @ Team Iron
Jacob Mellor
Zaktualizowano:

Prezentacja danych jest kluczowym aspektem tworzenia stron internetowych, a w przypadku danych tabelarycznych niezbędna jest interaktywna i bogata w funkcje tabela. jQuery DataTables to potężna biblioteka JavaScript, która zapewnia zaawansowane funkcje do tworzenia dynamicznych i responsywnych tabel. W tym artykule omówimy, jak zintegrować i używać jQuery DataTables w aplikacji internetowej ASP.NET w celu ulepszenia prezentacji danych tabelarycznych.

Jak korzystać z jQuery DataTables w aplikacji internetowej ASP.NET?

  1. Utwórz lub otwórz aplikację internetową.
  2. Zainstaluj pakiety Entity Framework.
  3. Dodaj model, kontekst bazy danych i kontroler.
  4. Dodaj ciąg połączenia z bazą danych i skonfiguruj ustawienia.
  5. Dodaj migrację i aktualizację bazy danych.
  6. Dodaj bibliotekę jQuery DataTables po stronie klienta.
  7. Dodaj tabelę HTML i kod JavaScript.
  8. Skompiluj i uruchom aplikację.
  9. Eksportuj dane do Excela za pomocą IronXL do obróbki arkuszy kalkulacyjnych.

Czym jest jQuery DataTables?

jQuery DataTables to lekka, elastyczna i bogata w funkcje wtyczka jQuery do obsługi danych tabelarycznych. Oferuje szeroki zakres funkcji, takich jak sortowanie, wyszukiwanie i paginacja, co czyni go idealnym wyborem do prezentowania dużych zbiorów danych w przyjazny dla użytkownika sposób.

Przetwarzanie po stronie klienta

W przetwarzaniu po stronie klienta przeglądarka ma możliwość obsługi zbioru danych lokalnie. jQuery DataTables, dzięki swoim zaawansowanym funkcjom, umożliwia dynamiczną interakcję i manipulację danymi bezpośrednio w przeglądarce użytkownika. Chociaż podejście to sprawdza się bez zarzutu w przypadku mniejszych zbiorów danych, może napotkać trudności podczas obsługi rozległych zbiorów danych ze względu na potencjalne wąskie gardła wydajnościowe i zwiększone zużycie zasobów.

W tym artykule omówimy przetwarzanie po stronie klienta w aplikacji ASP.NET Razor Page, podkreślając zalety, jakie oferuje ono w przypadku mniejszych zbiorów danych, oraz przedstawiając potencjalne kwestie do rozważenia i optymalizacje zapewniające płynne i responsywne doświadczenie użytkownika.

Pierwsze kroki z jQuery DataTables w aplikacji internetowej ASP.NET

W tym artykule wykorzystamy aplikację internetową ASP.NET Razor Page przeznaczoną dla platformy .NET Framework 4.8. W zależności od potrzeb można użyć Blazor, MVC lub Web Forms.

W niniejszym artykule zostanie zastosowane podejście "Code-First". Możesz skorzystać z podejścia Database First, jeśli wolisz. Aby korzystać z podejścia Code First, musimy zainstalować następujące pakiety.

  1. Microsoft.EntityFrameworkCore
  2. Microsoft.EntityFrameworkCore.Design
  3. Microsoft.EntityFrameworkCore.SqlServer
  4. Microsoft.EntityFrameworkCore.Tools

Zainstaluj powyższe pakiety za pomocą polecenia Install-Package z konsoli NuGet Package Manager lub zainstaluj je z rozwiązania NuGet Package Manager, wyszukując je.

Skonfigurujmy nasz projekt, dodając klasę Model, klasę ApplicationDbContext, kontroler, ciąg połączenia oraz konfigurację usług w pliku Program.cs.

Dodaj klasę modelu

W tym przykładzie używam klasy modelu Employee. Możesz z niego korzystać zgodnie ze swoimi wymaganiami.

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
$vbLabelText   $csharpLabel

Dodaj klasę ApplicationDbContext

Musimy dodać klasę ApplicationDbContext, aby skonfigurować 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
$vbLabelText   $csharpLabel

Dodaj kontroler pracowników

Dodaj EmployeeController w celu utworzenia punktu końcowego.

[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;
        }
    }
}
<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
			' Log exception here
			Throw
		End Try
	End Function
End Class
$vbLabelText   $csharpLabel

W tym przypadku stosujemy metodę HttpGet, ponieważ będziemy pobierać kompletne dane z serwera po stronie klienta oraz implementować paginację, wyszukiwanie i sortowanie po stronie klienta. Zwracamy tablicę JSON, która zostanie wyrenderowana po stronie klienta.

Dodaj ciąg połączenia

Dodaj następujący ciąg połączenia do pliku appsettings.json.

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

Dodaj następujący wiersz w klasie Program.cs poniżej wiersza webApplication.CreateBuilder(), aby nawiązać połączenie z serwerem 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)
$vbLabelText   $csharpLabel

Uruchom migrację

Kolejnym krokiem jest przeprowadzenie migracji, ponieważ stosujemy podejście Code First. Uruchom następujące polecenie w konsoli menedżera pakietów.

Add-Migration init
Add-Migration init
SHELL

To polecenie utworzy migrację. Teraz uruchom następujące polecenie, aby zastosować tę migrację do bazy danych.

update-database
update-database
SHELL

Teraz, gdy nasz projekt jest już skonfigurowany, a baza danych gotowa, wystarczy dodać bibliotekę jQuery i tabele HTML, aby przygotować interfejs użytkownika. W tym przykładzie jako źródło danych wykorzystaliśmy SQL Server, ale można użyć dowolnej innej bazy danych.

Dodaj bibliotekę jQuery DataTables

Musimy dodać do naszego projektu bibliotekę jQuery DataTables, która jest wtyczką rozszerzającą możliwości tabel dla biblioteki JavaScript jQuery. Możemy ją dodać, klikając prawym przyciskiem myszy na projekt, wybierając "Dodaj", a następnie "Dodaj bibliotekę po stronie klienta". Pojawi się małe okienko, w którym możemy wyszukać "jquery datatables" i zainstalować je, jak pokazano poniżej:

Dodaj bibliotekę jQuery DataTables

Dodaj tabelę HTML

Dodajmy tabelę HTML z pustym treścią. Dodamy wymagane nagłówki kolumn podczas konfiguracji jQuery DataTable. Dodaj poniższy kod do pliku 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>
}

Musimy dodać plik EmployeeDatatable.js do folderu wwwroot/Js. W tym pliku znajdziemy wywołanie Ajax oraz zaawansowane funkcje jQuery DataTable, takie jak filtrowanie, paginacja, wyszukiwanie, sortowanie itp.

Utwórz plik EmployeeDatatable.js

Utwórz plik EmployeeDatatable.js w folderze wwwroot/Js. Dodaj następujący kod.

$(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

Wykorzystaliśmy bogatą w funkcje bibliotekę jQuery DataTables. Ta potężna wtyczka jQuery pozwala nam wdrażać zaawansowane funkcje po stronie klienta przy minimalnym wysiłku.

Teraz skompiluj i uruchom tę aplikację.

Wynik

Widzimy, że dzięki jQuery w ASP.NET mamy gotowy, bardzo interaktywny interfejs użytkownika. Wyświetlane dane są następujące:

Wynik jQuery DataTables

Obecnie paginacja jest realizowana po stronie klienta, dlatego kompletne dane są wysyłane z serwera, jak pokazano poniżej:

Paginacja

Interfejs użytkownika

Możemy wyszukiwać, sortować i zmieniać stronę, a wszystko to będzie wykonywane po stronie klienta, jak pokazano poniżej:

Interfejs użytkownika

Wprowadzenie do IronXL

IronXL for .NET Excel File Manipulation to biblioteka umożliwiająca pracę z plikami Excel w aplikacjach .NET. Umożliwia tworzenie, odczytywanie, edytowanie i zapisywanie dokumentów Excel w różnych formatach, takich jak XLS, XLSX, CSV i TSV. Nie wymaga instalacji pakietu Microsoft Office ani interfejsu Excel Interop. Obsługuje .NET 5, .NET Core, Framework i Azure.

Często mamy potrzebę eksportowania danych do plików Excel lub CSV. W tym przypadku najlepszym wyborem jest IronXL. Teraz napiszemy kod, aby wyeksportować nasze dane do pliku Excel.

Zainstaluj IronXL

Zainstaluj bibliotekę IronXL w swoim projekcie, wpisując następujące polecenie w konsoli menedżera pakietów.

Install-Package IronPdf

Spowoduje to zainstalowanie IronXL i wymaganych zależności w naszym projekcie. Można go również pobrać bezpośrednio z pakietu IronXL NuGet.

Eksportuj dane do Excela

Napiszmy kod, aby przekonwertować naszą listę pracowników do pliku 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");
}
Public Sub ExportToExcel(ByVal employeeList As List(Of Employee))
	' Create a new workbook instance
	Dim wb As WorkBook = WorkBook.Create(ExcelFileFormat.XLSX)
	' Get the default worksheet
	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 Rows
	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

	' Save the workbook as an Excel file
	wb.SaveAs("Employee.xlsx")
End Sub
$vbLabelText   $csharpLabel

W prosty i łatwy sposób stworzyliśmy plik Excel na podstawie listy.

Plik wyjściowy Excel

IronXL udostępnia obszerne samouczki dotyczące tworzenia plików XLSX, przykłady kodu do odczytu plików Excel oraz szczegółową dokumentację, która pomoże Ci jak najlepiej wykorzystać jego rozbudowane API.

Wnioski

Podsumowując, jQuery DataTables stało się potężnym narzędziem do przekształcania prezentacji danych tabelarycznych w aplikacjach internetowych ASP.NET. Jego lekkość i bogactwo funkcji ułatwia tworzenie interaktywnych tabel, kładąc nacisk na sortowanie, wyszukiwanie i paginację. Zbadaliśmy niuanse przetwarzania po stronie klienta, wykorzystując możliwości przeglądarki w przypadku mniejszych zbiorów danych, jednocześnie uwzględniając potencjalne wyzwania związane z większymi ilościami danych. Przewodnik krok po kroku dotyczący konfiguracji aplikacji ASP.NET Razor Page i integracji jQuery DataTables dostarcza programistom praktycznych wskazówek. Ponadto wprowadzenie IronXL jako płynnego rozwiązania do zadań związanych z Excelem stanowi cenne uzupełnienie zestawu narzędzi, umożliwiając wydajny eksport danych. Dzięki tym narzędziom programiści mogą poprawić komfort użytkowania, prezentując dane w atrakcyjny i przystępny sposób.

IronXL oferuje różne opcje licencyjne w zależności od liczby programistów, projektów i potrzeb związanych z redystrybucją. Licencje są bezterminowe i obejmują bezpłatną pomoc techniczną oraz aktualizacje.

Często Zadawane Pytania

W jaki sposób jQuery DataTables może usprawnić prezentację danych w aplikacjach internetowych ASP.NET?

jQuery DataTables usprawnia prezentację danych, oferując funkcje takie jak sortowanie, wyszukiwanie i paginacja, które ułatwiają użytkownikom interakcję z dużymi zbiorami danych w responsywny i przyjazny dla użytkownika sposób.

Jakie są podstawowe kroki integracji jQuery DataTables w aplikacji ASP.NET Razor Page?

Aby zintegrować jQuery DataTables z aplikacją ASP.NET Razor Page, należy najpierw skonfigurować model, DbContext i kontroler, skonfigurować połączenie z bazą danych oraz zaimplementować przetwarzanie po stronie klienta w celu efektywnego zarządzania danymi przy użyciu podejścia Code-First z Entity Framework.

W jaki sposób przetwarzanie po stronie serwera przynosi korzyści jQuery DataTables podczas zarządzania dużymi zbiorami danych?

Przetwarzanie po stronie serwera przynosi korzyści jQuery DataTables poprzez przeniesienie operacji na serwer, co poprawia wydajność i efektywność podczas pracy z dużymi zbiorami danych, w przeciwieństwie do przetwarzania po stronie klienta, które może spowolnić działanie przy dużych ilościach danych.

Jaką rolę odgrywa IronXL w eksportowaniu danych do programu Excel z aplikacji ASP.NET?

IronXL pozwala programistom eksportować dane do Excela poprzez utworzenie nowego skoroszytu, wypełnienie go wierszami danych z zestawu danych i zapisanie go jako plik Excel. Ułatwia to pracę z plikami Excel bez konieczności korzystania z pakietu Microsoft Office.

Czy można pracować z plikami Excel w aplikacjach .NET bez pakietu Microsoft Office?

Tak, IronXL umożliwia aplikacjom .NET pracę z plikami Excel niezależnie od pakietu Microsoft Office, obsługując różne formaty, takie jak XLS, XLSX, CSV i TSV.

Jakie są opcje licencyjne dotyczące korzystania z IronXL w projektach .NET?

IronXL oferuje różne opcje licencyjne w zależności od liczby programistów, projektów i wymagań dotyczących dystrybucji. Licencje są wieczyste i obejmują bezpłatną pomoc techniczną oraz aktualizacje.

Jakie są zalety stosowania podejścia Code-First w ASP.NET z jQuery DataTables?

Podejście Code-First w ASP.NET z jQuery DataTables umożliwia łatwą konfigurację modelu bazy danych i kontekstu, co pozwala na dynamiczne zarządzanie danymi oraz integrację z front-endowymi DataTables w celu zwiększenia interaktywności.

Jak rozwiązywać typowe problemy związane z jQuery DataTables w aplikacji ASP.NET?

Typowe problemy związane z jQuery DataTables można rozwiązać, upewniając się, że skrypty i arkusze stylów zostały poprawnie dołączone, weryfikując ścieżki źródeł danych, sprawdzając błędy konsoli pod kątem problemów z JavaScript oraz potwierdzając prawidłową konfigurację przetwarzania po stronie serwera.

Jacob Mellor, Dyrektor Technologiczny @ Team Iron
Jacob Mellor
  Czat z zespołem inżynierów teraz
Dyrektor ds. technologii

Jacob Mellor jest Chief Technology Officer w Iron Software i wizjonerskim inżynierem, pionierem technologii C# PDF. Jako pierwotny deweloper głównej bazy kodowej Iron Software, kształtuje architekturę produktów firmy od jej początku, przekształcając ją wspólnie z CEO Cameron Rimington w firmę liczą...

Czytaj więcej

Powiązane artykuły

30-dniowy okres próbny → Pełna wersja produktu. Bez ograniczeń. Bez karty. Bezpłatna próba

Zespol wsparcia Iron

Jestesmy online 24 godziny, 5 dni w tygodniu.
Czat
Email
Zadzwon do mnie