Jquery DataTables Asp.Net Core Server Side

This repository is a Server Side processor for Jquery DataTables with Asp.Net Core as backend. It provides a quick way to implement dynamic multiple column searching and sorting along with pagination and excel export at the server side. This can be done by decorating your model properties with simple attributes.

Demo Implementation Project URL - Free Download

Note: This tutorial contains example for both AJAX GET and AJAX POST Server Side Configuration.

Warning: If we are RESTful strict, we should use GET Method to get information not POST but I prefer this way to avoid limitations related to form data through the query string, so up to you if you want to use GET. I recommend using AJAX GET only if your DataTable has very less number of columns. As Jquery DataTables AJAX requests produces too large query string which will be rejected by server.

Wait - Why JqueryDataTablesServerSide ?

Well... there are lots of different approaches how to get a Jquery DataTables with Asp.Net Core app running. I thought it would be nice for .NET devs to use the ASP.NET Core backend and just decorate the model properties with a pretty simple attributes called [Searchable] and [Sortable]. [DisplayName(“”)] as the name suggests, can be used to change the column name in excel export or display name in the table HTML. I just combine ASP.NET Core & Jquery DataTables for easy server side processing.

Give a Star ⭐️

If you liked JqueryDataTablesServerSide project or if it helped you, please give a star ⭐️ for this repository. That will not only help strengthen our .NET community but also improve development skills for .NET developers in around the world. Thank you very much 👍

Search

• [Searchable]
• [SearchableString]
• [SearchableDateTime]
• [SearchableShort]
• [SearchableInt]
• [SearchableLong]
• [SearchableDecimal]
• [SearchableDouble]
• [SearchableEnum(typeof(TEnum))]
• [NestedSearchable]

Sort

• [Sortable]
• [Sortable(Default = true)]
• [NestedSortable]

All the above attributes have the following options,

|Mode |Option |Type |Example |Description| |-------------|--------------------|--------|-------------------------------------------------------------|-----------| |Search |EntityProperty |string|[Searchable*(EntityProperty = "EntityPropertyName")]|To map your view model property with entity property if they have a different name| |Nested Search|ParentEntityProperty|string|[NestedSearchable(ParentEntityProperty = "ParentEntityPropertyName")]|To map your view model property with entity property if they have a different name| |Sort |EntityProperty |string|[Sortable(EntityProperty = "EntityPropertyName")]|To map your view model property with entity property if they have a different name| |Sort |Default |bool |[Sortable(Default = true)]|To indicate your database to do default sort by this property if no sort is specified from client| |Nested Sort |ParentEntityProperty|string|[NestedSortable(EntityProperty = "EntityPropertyName")]|To map your view model property with entity property if they have a different name|

Columns

Name

Column names in HTML Table can be configured using the below attributes

• [Display(Name = "")]
• [DisplayName(“”)]

HTML Setup

To customize the HTML Column display in <jquery-datatables> Tag Helper, use the following attribute

• [JqueryDataTableColumn]

And here are the options,

|Option |Type |Example |Description| |-------|--------|-----------------------------------------|-----------| |Exclude|bool |[JqueryDataTableColumn(Exclude = true)]|To exclude the property of your model from being added in HTML| |Order |int |[JqueryDataTableColumn(Order = N)] |To control the order of columns in HTML|

Please note: From v.3.2.0 all the simple properties in your models must have [JqueryDataTableColumn] attribute for the <jquery-datatables> Tag Helper to work.

Compatibility Chart

The following chart describes the operator compatibility with data types with green as compatible and red as not compatible.

|Operator|Description|string|DateTime|short|int|long|decimal|double|enum| |--------|-----------|--------|----------|-------|-----|------|---------|--------|------| |co |Contains |:heavy_check_mark:|:x:|:x:|:x:|:x:|:x:|:x:|:heavy_check_mark:| |eq |Equals | :heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:| |gt |GreaterThan| :x:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:x:| |gte |GreaterThanEqual| :x:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:x:| |lt |LesserThan| :x:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:x:| |lte |LesserThanEqual| :x:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:heavy_check_mark:|:x:|

NuGet:

• JqueryDataTables.ServerSide.AspNetCoreWeb v4.0.0

Usage:

To activate and make Jquery DataTable communicate with asp.net core backend,

Package Manager:

PM> Install-Package JqueryDataTables.ServerSide.AspNetCoreWeb

.NET CLI:

> dotnet add package JqueryDataTables.ServerSide.AspNetCoreWeb

Startup.cs

Asp.Net Core 3.x:

Json.NET has been removed from the ASP.NET Core shared framework.

The default for ASP.NET Core is now System.Text.Json, which is new in .NET Core 3.0. Consider using System.Text.Json when possible. It's high-performance and doesn't require an additional library dependency. I prefer to use Miscrosoft's new System.Text.Json.

With System.Text.Json, setup your ConfigureServices as follows:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews()
            .AddJsonOptions(options =>
            {
                options.JsonSerializerOptions.Converters.Add(new JsonStringEnumConverter());
                options.JsonSerializerOptions.PropertyNamingPolicy = null;
            });
    services.AddSession();
    services.AddAutoMapper(typeof(Startup));
}

If your using Json.Net, then add a package reference to Microsoft.AspNetCore.Mvc.NewtonsoftJson and then setup your ConfigureServices as follows:

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews()
            .AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
    services.AddSession();
    services.AddAutoMapper(typeof(Startup));
}

Asp.Net Core 2.x:

If you're using Asp.Net Core 2.x, then setup your ConfigureServices as follows,

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc()
            .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver())
    services.AddSession();
    services.AddAutoMapper(typeof(Startup));
}

Please note: services.AddSession() is is required only if you're using excel export functionality in Jquery DataTables.

Tag Helpers

Add a JqueryDataTables TagHelper reference to your _ViewImports.cshtml file as shown below

@addTagHelper *, JqueryDataTables.ServerS