IRONSOFTWAREHOME
AKTUALNOŚCI DLA PROGRAMISTÓW

Datatables .NET (jak to działa dla programistów)

Jacob Mellor, Dyrektor Technologiczny @ Team Iron
Jacob Mellor
Updated: 23 kwietnia 2026

Programiści ASP.NET często szukają wydajnych sposobów prezentacji danych tabelarycznych lub tabel HTML z zaawansowanymi funkcjami takimi jak sortowanie, wyszukiwanie i paginacja. DataTables.NET to potężna biblioteka jQuery, JavaScript i wysoce elastyczne narzędzie, które ułatwia tworzenie interaktywnych i bogatych w funkcje tabel w aplikacjach internetowych. W tym artykułe omówimy, jak zintegrować pliki dystrybucyjne DataTables.NET, bibliotekę rozszerzającą tabele do przetwarzania po stronie serwera w projekcie ASP.NET, aby ulepszyć prezentację i doświadczenie użytkownika z danymi tabelarycznymi.

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

  1. Stwórz aplikację internetową ASP.NET
  2. Dodaj pakiet stylizacji klienta DataTables
  3. Zainstaluj pakiety Entity Framework Core, tylko oprogramowanie podstawowe
  4. Dodaj klasę modelu, kontroler i stronę Razor
  5. Dodaj kod JavaScript w pliku JS
  6. Skonfiguruj konfigurację
  7. Zbuduj i uruchom program
  8. Eksportuj dane do pliku Excel za pomocą IronXL dla Excel Data Export

Czym jest DataTables.NET?

DataTables.NET to biblioteka JavaScript jQuery, która pozwala na tworzenie i manipulowanie interaktywnymi tabelami w aplikacjach .NET. Opiera się na wtyczce jQuery DataTables, która zapewnia kompleksowe funkcje API, takie jak paginacja, sortowanie, filtrowanie i przewijanie dla dynamicznych, jak i statycznych tabel HTML. To biblioteka rozszerzająca tabele, która może współpracować z różnymi źródłami danych, takimi jak bazy danych SQL, AJAX czy obiekty w pamięci.

Przetwarzanie po stronie serwera

Rozważmy scenariusz, w którym posiadasz punkt końcowy API dostarczający ogromny zestaw danych produktów. Standardowe podejście polega na tym, że jQuery DataTables wykonuje wywołanie AJAX do tego API, uzyskując listę produktów w formacie JSON i renderując tabelę HTML. To jest znane jako przetwarzanie po stronie klienta, które jest wydajne dla mniejszych zestawów danych, zazwyczaj od 100 do 1000 rekordów. Ale co się dzieje, gdy zestaw danych rozszerza się do 10 000 rekordów lub więcej?

W przypadku dużej liczby rekordów staje się to niepraktyczne, by przesyłać cały zestaw danych do przeglądarki jednocześnie. Przesłanie 10 000 rekordów na raz jest marnotrawstwem zarówno pod względem przepustowości jak i obciąża zasoby przeglądarki. W takich przypadkach alternatywne podejście, przetwarzanie po stronie serwera, staje się istotne dla optymalizacji wydajności.

W przetwarzaniu po stronie serwera, zamiast przesyłać cały zestaw danych, API przesyła dane w kontrolowanych fragmentach, zazwyczaj paginowane z około 50 rekordami na stronę. Dzięki temu czas ładowania jest znacząco poprawiony, ponieważ jQuery DataTables teraz ładuje umiarowaną liczbę rekordów (~50) zamiast całego zestawu danych jednocześnie. Takie podejście zmniejsza użycie CPU i przepustowość, tworząc bardziej efektywną interakcję między API a DataTable.

W tym artykułe zbadamy implementację przetwarzania po stronie serwera w aplikacji ASP.NET Razor Page, demonstrując jak efektywnie obsługiwać i wyświetlać obszerne zestawy danych, jednocześnie poprawiając ogólną wydajność Twojej aplikacji internetowej.

Początek pracy z DataTables.NET w ASP.NET 8

Aby rozpocząć, musimy dodać DataTables.NET Client Side Library do naszego projektu. Ten artykuł będzie wykorzystywał projekt ASP.NET Core Web App (Razor Pages) z .NET 8. Możesz używać dowolnego Projektu Web App zgodnie z wymaganiami.

Aby dodać bibliotekę po stronie klienta, kliknij prawym przyciskiem na Solution>Dodaj>Biblioteka klienta i wyszukaj tabele danych, jak pokazano poniżej.

DataTables.NET (Jak to działa dla programisty): Rysunek 1 - Dodaj bibliotekę po stronie klienta

Teraz, musimy dodać klasę modelu, DB Context, kontroler, tabelę HTML i wywołanie AJAX.

Ale przedtem musimy zainstalować pakiety NuGet EntityFramework, aby połączyć naszą aplikację z bazą danych. Ten artykuł wykorzysta podejście Code First, możesz użyć bazy danych first zgodnie z preferencjami.

Zainstaluj następujące lokalnie hostowane pakiety:

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

Zainstaluj powyższy pakiet za pomocą komendy install-package z konsoli NuGet Package Manager, lub zainstaluj go z rozwiązania NuGet Package Manager wyszukując go.

Dodaj klasę modelu

W tym przykładzie używam klasy modelu produktu, możesz ją użyć zgodnie z wymaganiami.

public class Product
{
    public int Id { get; set; }
    public string ProductName { get; set; } = string.Empty;
    public string ProductPrice { get; set; } = string.Empty;
    public string ProductWeight { get; set; } = string.Empty;
    public string ProductDescription { get; set; } = string.Empty;
    public DateTime ProductManufacturingDate { get; set; }
    public DateTime ProductExpiryDate { get; set; }
}

Dodaj klasę ApplicationDBContext

public class ApplicationDBContext : DbContext
{
    public ApplicationDBContext(DbContextOptions<ApplicationDBContext> options) : base(options)
    {
    }
    public DbSet<Product> Products { get; set; }
}

Dodaj zaawansowane kontrolki interakcji

Dodamy ProductDatatables.js do folderu wwwroot/js w celu dodania zaawansowanych kontrol, takich jak paginacja, wyszukiwanie itd.

// Initialize the DataTables plugin for the HTML element with 'productDatatable' ID
$(document).ready(function () {
    $("#productDatatable").DataTable({
        "processing": true, // Enable processing indicator
        "serverSide": true, // Enable server-side processing
        "ajax": {
            "url": "/api/Product", // API endpoint for fetching product data
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [{
            // Define properties for columns
            "targets": [0],
            "visible": false, // Hide the 'Id' column
            "searchable": false // Disable searching for the 'Id' column
        }],
        "columns": [
            { "data": "id", "name": "Id", "autoWidth": true },
            { "data": "productName", "name": "ProductName", "autoWidth": true },
            { "data": "productPrice", "name": "ProductPrice", "autoWidth": true },
            { "data": "productWeight", "name": "ProductWeight", "autoWidth": true },
            { "data": "productDescription", "name": "ProductDescription", "autoWidth": true },
            { "data": "productManufacturingDate", "name": "ProductManufacturingDate", "autoWidth": true },
            { "data": "productExpiryDate", "name": "ProductExpiryDate", "autoWidth": true },
            {
                // Add a 'Delete' button with an onclick event for deleting the product
                "render": function (data, type, row) { 
                    return "<a href='#' class='btn btn-danger' onclick=DeleteProduct('" + row.id + "');>Delete</a>"; 
                }
            }
        ]
    });
});
JavaScript

Teraz, musimy dodać tabelę HTML.

Dodaj tabelę HTML

Napisz następujący kod w pliku index.cshtml, aby dodać statyczną stronę HTML.

@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="productDatatable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Product Name</th>
                    <th>Product Price</th>
                    <th>Product Weight</th>
                    <th>Product Description</th>
                    <th>Product Manufacturing Date</th>
                    <th>Product Expiry Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </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/ProductDatatable.js"></script>
}
Text

Musimy dodać kontroler.

Dodaj kontroler produktu

Dodaj kontroler produktów dla tworzenia punktu końcowego i bezpośrednich żądań pobierania.

[Route("api/[controller]")]
[ApiController]
public class ProductController : ControllerBase
{
    private readonly ApplicationDBContext context;
    public ProductController(ApplicationDBContext context)
    {
        this.context = context;
    }

    [HttpPost]
    public IActionResult GetProducts()
    {
        try
        {
            var draw = Request.Form["draw"].FirstOrDefault();
            var start = Request.Form["start"].FirstOrDefault();
            var length = Request.Form["length"].FirstOrDefault();
            var searchValue = Request.Form["search[value]"].FirstOrDefault();
            int pageSize = length != null ? Convert.ToInt32(length) : 0;
            int skip = start != null ? Convert.ToInt32(start) : 0;
            int recordsTotal = 0;
            var productData = context.Products.ToLis();

            // Filtering data based on provided search value
            if (!string.IsNullOrEmpty(searchValue))
            {
                productData = productData.Where(m => m.ProductName.Contains(searchValue)
                                            || m.ProductDescription.Contains(searchValue)
                                            || m.Id.ToString().Contains(searchValue)).ToList();
            }
            
            recordsTotal = productData.Count();
            var data = productData.Skip(skip).Take(pageSize).ToList();
            var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data };
            return Ok(jsonData);
        }
        catch (Exception)
        {
            throw;
        }
    }
}

Tutaj wdrożyliśmy paginację i wyszukiwanie po stronie serwera.

Teraz, musimy skonfigurować naszą bazę danych i dodać ustawienia do klasy Program.cs. Jeśli używasz .NET 5 lub starszej wersji, możesz potrzebować zrobić to w klasie Startup.cs.

Przede wszystkim, dodaj następujący Connection String w pliku appsettings.json.

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

Teraz dodaj poniższy kod do klasy Program.cs.

public static void Main(string[] args)
{
    var builder = WebApplication.CreateBuilder(args);
    builder.Services.AddDbContext<ApplicationDBContext>(options =>
    {
         options.UseSqlServer(builder.Configuration.GetConnectionString("ProductDB"));
    });
    builder.Services.AddControllers();
    // Add services to the container.
    builder.Services.AddRazorPages();
    var app = builder.Build();
    // Configure the HTTP request pipeline.
    if (!app.Environment.IsDevelopment())
    {
         app.UseExceptionHandler("/Error");
         // The default HSTS value is 30 days.
         app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseRouting();
    app.UseAuthorization();
    app.MapControllers();
    app.MapRazorPages();
    app.Run();
}

Musimy uruchomić migrację, ponieważ używamy podejścia code-first.

Uruchom następujące polecenie w konsoli menedżera pakietów.

Add-Migration init
SHELL

Powyższa komenda stworzy migrację. Teraz musimy zaimplementować te migracje do naszej bazy danych. Uruchom następujące polecenie w konsoli menedżera pakietów.

Update-Database
SHELL

Powyższa komenda stworzy tabele w naszej bazie danych. Dodaj przykładowe dane w tabeli produktów; możesz wygenerować losowe dane z Mockaroo.

Teraz skompiluj i uruchom tę aplikację.

Wynik

Widzimy, że mamy bardzo interfejs użytkownika z zaawansowaną kontrolką interakcji.

DataTables.NET (Jak to działa dla programisty): Rysunek 2 - Wynik

Teraz implementacja paginacji po stronie serwera jak pokazano poniżej.

DataTables.NET (Jak to działa dla programisty): Rysunek 3 - Paginacja

Interfejs użytkownika

Dane są następnie renderowane po stronie klienta z bogatą kontrolką interfejsu użytkownika.

DataTables.NET (Jak to działa dla programisty): Rysunek 4 - UI

Możesz odkrywać więcej z dokumentacji DataTables.NET klikając odkryj dokumentację DataTables.NET.

Wprowadzenie do IronXL

IronXL - Biblioteka Excel dla .NET to biblioteka umożliwiająca pracę z plikami Excel w aplikacjach .NET. Może tworzyć arkusze Excel, czytać pliki CSV, edytować pliki Excel, oraz eksportować do Excel w różnych formatach, takich jak XLS, XLSX, CSV i TSV. Nie wymaga zainstalowanego Microsoft Office lub Excel Interop. Obsługuje .NET 8, 7, 6, 5, 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 do eksportu naszych danych do pliku Excel.

Zainstaluj IronXL

Zainstaluj bibliotekę IronXL w naszym projekcie wprowadzając poniższą komendę w konsoli Package Manager.

PM > Install-Package IronPdf

Spowoduje to zainstalowanie IronXL i wymaganych zależności w naszym projekcie.

Eksportuj dane do Excela

Napiszmy kod do konwersji naszej listy produktów do pliku Excel.

public void ExportToExcel(List<Product> productList)
{
    WorkBook wb = WorkBook.Create(ExcelFileFormat.XLSX); // Create a new workbook instance
    WorkSheet ws = wb.DefaultWorkSheet; // Access the default worksheet
    int rowCount = 1;

    // Iterate over the product list and fill the worksheet
    foreach (Product product in productList)
    {
        ws["A" + rowCount].Value = product.Id.ToString();
        ws["B" + rowCount].Value = product.ProductName;
        ws["C" + rowCount].Value = product.ProductDescription;
        ws["D" + rowCount].Value = product.ProductPrice;
        ws["E" + rowCount].Value = product.ProductWeight;
        ws["F" + rowCount].Value = product.ProductManufacturingDate;
        ws["G" + rowCount].Value = product.ProductExpiryDate;
        rowCount++;
    }
    wb.SaveAs("product.xlsx"); // Save the workbook as an Excel file
}

Utworzyliśmy plik Excel z listy w bardzo prosty i łatwy sposób.

DataTables.NET (Jak to działa dla programisty): Rysunek 5 - Wynik w Excel

IronXL dostarcza wszechstronne samouczki o tworzeniu plików XLSX, przykłady kodu do czytania Excel, oraz dokumentację API aby używać jego kompleksowego API w najlepszy możliwy sposób.

W optymalizacji wydajności ASP.NET, opieramy się wyłącznie na Oprogramowaniu Podstawowym, zapewniając lekkie i wydajne środowisko deweloperskie. Wykorzystanie DataTables.NET jako lokalnie hostowanych pakietów dodatkowo zwiększa responsywność, minimalizując zewnętrzne zależności dla usprawnionego przetwarzania danych i eksportu do Excel. Dodatkowo, efektywna kontrybucja kodu staje się bezproblemowa w tym zoptymalizowanym i samowystarczalnym ekosystemie.

IronPDF to rozwiązanie zaprojektowane do konwersji stron internetowych, URLi i HTML na dokumenty PDF. Generowane pliki PDF zachowują oryginalne formatowanie i elementy stylistyczne źródłowych stron internetowych. To narzędzie jest szczególnie skuteczne w tworzeniu PDF przedstawiających zawartość opartą na web, taką jak raporty i faktury.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Wnioski

Podsumowując, wykorzystanie DataTables.NET do przetwarzania po stronie serwera w projektach repo dystrybucji ASP.NET okazuje się dobrą strategią do efektywnego obsługi masywnych zestawów danych. To podejście zapewnia zoptymalizowaną wydajność poprzez przesyłanie danych w kontrolowanych fragmentach, minimalizowanie zużycia przepustowości i poprawę wrażeń użytkownika. Integracja IronXL dodatkowo rozszerza możliwości aplikacji, umożliwiając bezproblemowy eksport danych tabelarycznych do Excel dla kompleksowej analizy danych i raportowania.

Przyjmując te technologie, deweloperzy mogą tworzyć aplikacje internetowe, które osiągają równowagę między bogatą interaktywnością a wydajnością zasobów, zapewniając użytkownikom spójne i responsywne wrażenia, szczególnie w scenariuszach, gdzie zaangażowane są duże zbiory danych. IronXL oferuje różne opcje licencjonowania dla IronXL, w zależności od liczby deweloperów, projektów i potrzeb redystrybucji. Licencje są bezterminowe i obejmują bezpłatną pomoc techniczną oraz aktualizacje.

Jacob Mellor, Dyrektor Technologiczny @ Team Iron
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ącą ponad 50 osób, obsługującą NASA, Teslę i światowe agencje rządowe.

...
Czytaj więcej

Powiązane artykuły

Key in blue circle

Uzyskaj natychmiast swój darmowy 30-dniowy Klucz Testowy.

Brak ograniczeń. 100% dostępności. Bez karty kredytowej.

bullet_checkedNie wymaga karty kredytowej ani tworzenia kontaBrak ograniczeń. 100% dostępności. Bez karty kredytowej.
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried IronPDF
Zarezerwuj swoje darmowe Demo na żywo
Booking Badge

Zaufane przez miliony inżynierów na całym świecie

Logotypy klientów Iron Software
Otrzymaj swoje Konsultacja Bez Zobowiązań
Wypełnij poniższy formularz lub wyślij e-mail na sales@ironsoftware.com
Twoje dane zawsze będą utrzymywane w tajemnicy.
Zaufane przez miliony inżynierów na całym świecie
Logotypy klientów Iron Software
Otrzymaj swój darmowy Klucz Próbny na 30 dni natychmiast.
Nie wymaga karty kredytowej ani tworzenia konta