jQuery DataTable Server Side Pagination with ASP.NET Core

Introduction

When dealing with a large amount of data in a web application, it is important to optimize the display of this data to avoid performance issues. One technique to achieve this is server-side pagination. In this approach, only a subset of the data is returned from the server, reducing the amount of data that needs to be rendered in the browser.

jQuery DataTables is a powerful plugin that provides rich functionality for displaying and manipulating data in web applications. It can be easily integrated with ASP.NET Core to achieve server-side pagination.

This guide will provide a step-by-step tutorial on how to implement jQuery DataTables with server-side pagination in an ASP.NET Core application.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of C# and ASP.NET Core.

Step 1: Set up the ASP.NET Core Application

Start by creating a new ASP.NET Core Project using Visual Studio. Select ASP.NET Core Web Application as the project type and click Next. Give the project a name and click Create. On the next screen, select Web Application as the project template and click Create.

Step 2: Add jQuery DataTables to the project

To add jQuery DataTables to the project, use NuGet Package Manager to install the package. Open Package Manager Console and run the following command:

Install-Package jquery.datatables

Step 3: Create a Model for the Data

Create a model that represents the data you want to display in the DataTable. For this demo, I will create a simple model that represents a Product.

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal Price { get; set; }
}

Step 4: Create a Controller and Action to Retrieve Data

Create a controller to handle requests to retrieve data for the DataTable. For this demo, I will create a controller called ProductsController and an action called GetData.

In the GetData action, use LINQ to retrieve a subset of the data from the database. Use the DataTablesRequest class from the jQuery DataTables package to get the search term, sort order, and paging information from the client. Then return a JSON object containing the data and the total number of records.

public IActionResult GetData()
{
    // get the search term, sort order, and paging information from the client
    var request = HttpContext.Request.Query.ToDataTablesRequest();

    // retrieve a subset of the data from the database
    var products = _context.Products
        .Where(p => p.Name.Contains(request.Search.Value))
        .OrderBy(p => p.Name)
        .Skip(request.Start)
        .Take(request.Length);

    // return a JSON object containing the data and the total number of records
    return Json(new DataTablesResponse(
        draw: request.Draw,
        recordsTotal: _context.Products.Count(),
        recordsFiltered: products.Count(),
        data: products.ToList()));
}

Step 5: Create a View to Render the DataTable

Create a view to render the DataTable on the client side. In the view, add a table element with an ID of "productsTable". Use jQuery to initialize the DataTable and configure the server-side processing options.

@{
    ViewData["Title"] = "Products";
}

<table id="productsTable" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>
</table>

@section Scripts {
    <script>
        $(document).ready(function () {
            $('#productsTable').DataTable({
                serverSide: true,
                ajax: '/Products/GetData',
                columns: [
                    { 'data': 'name' },
                    { 'data': 'description' },
                    { 'data': 'price' }
                ]
            });
        });
    </script>
}

Conclusion

In this tutorial, you learned how to implement server-side pagination for a DataTable in an ASP.NET Core application. With server-side pagination, you can optimize your application to handle large amounts of data while maintaining the user experience. By combining the power of jQuery DataTables and ASP.NET Core, you can easily implement this technique in your own web applications.