jQDataTables.ServerSide.MVC5 1.0.0

MVC component which adds functionality for automatic server side processing for the famous table plugin for jQuery - DataTables. Supports paging, searching, sorting and custom filters (Less Than, Less than or equal, Greater than, Greater than or equal and Equal) and nested objects.

There is a newer version of this package available.
See the version list below for details.
Install-Package jQDataTables.ServerSide.MVC5 -Version 1.0.0
dotnet add package jQDataTables.ServerSide.MVC5 --version 1.0.0
<PackageReference Include="jQDataTables.ServerSide.MVC5" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add jQDataTables.ServerSide.MVC5 --version 1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

jQuery Datatables Server Side Processing

ASP NET component which adds functionality for automatic server side processing for the famous table plugin for jQuery. It uses IQueryable<T> interface to construct query expressions to your data collection which can be processed by an ORM like Entity Framework.

Supports:

  • Paging;
  • Searching;
  • Sorting;
  • Custom filters: Less Than, Less than or equal, Greater than, Greater than or equal and Equal;
  • Nested objects;

Currently tested with Entity Framework versions 6.0.0 and 6.2.0 and Datatables version 1.10.16.

Install

MVC 5

Install nuget package

Install-Package jQDataTables.ServerSide.MVC5

How to use on the server side

How to use with MVC 5

How to use on the client side

For how to install the jQuery Datatables plugin refer to the official documentation here

Here you can find how to configure for server side processing.

In order to map the ajax response to the correct columns the columns property must be configure in the configuration object.

Example:

    var table = $('table').DataTable({
        "proccessing": true,
        "serverSide": true,
        "ajax": {
            url: "path to the data source",
            type: 'POST'
        },
        "language": {
            "search": "",
            "searchPlaceholder": "Search..."
        },
        "columns": [
            { "data": "CustomerID", "searchable": false },
            { "data": "Person.FirstName", "searchable": true },
            { "data": "Person.LastName", "searchable": true },
            { "data": "Store.Name", "searchable": true },
        ]
    });
Searching

Read how to use on the client side from here

The searching is performed only on string columns. Therefore the searchable parameter inside the columns property must be set to false. Only the string columns with the searchable parameter set to true will be included in the search.

Individual column filtering

Read how to use on the client side from here.

For all string columns the individual column filter will work as case insensitive search. For other types it will match the exact value. For DateTime types it will match the value with precision to the seconds.

Nested objects

Read how to use on the client side from here.

Custom filters

To use the predefined custom filters the data property of the configuration object must be configured properly link.

The following custom filters are supported on the server side:

  • gt : greater than;
  • gte : greater than or equal;
  • lt : less than;
  • lte : less than or equal;
  • eq : eqaul;
Example:
<div>
    CreditRating: from <input type="number" id="minCreditRating" value="1" class="reload-table" />
    to <input type="number" id="maxCreditRating" value="3" class="reload-table" />
</div>

<div>
    Business Entity ID = <input type="number" id="businessEntityId" value="" class="reload-table" />
</div>

<div>
    Modified Date = <input type="date" id="modifiedDate" value="" class="reload-table" />
</div>

<div>
    Account Number = <input type="text" id="accountNumber" value="" class="reload-table" />
</div>

<table id="SearchResultTable" class="display" cellspacing="0" width="100">
    <thead>
        <tr>
            <th>BusinessEntityID</th>
            <th>CreditRating</th>
            <th>ActiveFlag</th>
            <th>AccountNumber</th>
            <th>ModifiedDate</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>BusinessEntityID</th>
            <th>CreditRating</th>
            <th>ActiveFlag</th>
            <th>AccountNumber</th>
            <th>ModifiedDate</th>
        </tr>
    </tfoot>
</table>

@section Scripts {
    <script>


        var table = $('#SearchResultTable').DataTable({
            "proccessing": true,
            "serverSide": true,
            "ajax": {
                url: "@Url.Action("GetVendorsData", "Vendors")",
                type: 'POST',
                "data": function (d) {
                    d.custom = {
                        "filters": {
                            "CreditRating": { "gte": $('#minCreditRating').val(), "lte": $('#maxCreditRating').val() },
                            "BusinessEntityID": { "eq": $('#businessEntityId').val() },
                            "ModifiedDate": { "eq": $('#modifiedDate').val() },
                            "AccountNumber": { "eq": $('#accountNumber').val() },
                        }
                    }
                }
            },
            "language": {
                "search": "",
                "searchPlaceholder": "Search..."
            },
           "columns": [
               { "data": "BusinessEntityID", searchable: false },
               { "data": "CreditRating", searchable: false },
               { "data": "ActiveFlag", "searchable": false },
               { "data": "AccountNumber", searchable: true },
               { "data": "ModifiedDate", "searchable": false},
            ],
           "columnDefs": [
               {
                   "render": function (data, type, row) {
                       date = new Date(parseInt(row.ModifiedDate.replace("/Date(", "").replace(")/", ""), 10));

                       return date.toLocaleDateString();
                   },
                   "targets": 4
               }
           ]

        });

        $('.reload-table').on('change', function () {
            table.ajax.reload();
        });
    </script>
}

jQuery Datatables Server Side Processing

ASP NET component which adds functionality for automatic server side processing for the famous table plugin for jQuery. It uses IQueryable<T> interface to construct query expressions to your data collection which can be processed by an ORM like Entity Framework.

Supports:

  • Paging;
  • Searching;
  • Sorting;
  • Custom filters: Less Than, Less than or equal, Greater than, Greater than or equal and Equal;
  • Nested objects;

Currently tested with Entity Framework versions 6.0.0 and 6.2.0 and Datatables version 1.10.16.

Install

MVC 5

Install nuget package

Install-Package jQDataTables.ServerSide.MVC5

How to use on the server side

How to use with MVC 5

How to use on the client side

For how to install the jQuery Datatables plugin refer to the official documentation here

Here you can find how to configure for server side processing.

In order to map the ajax response to the correct columns the columns property must be configure in the configuration object.

Example:

    var table = $('table').DataTable({
        "proccessing": true,
        "serverSide": true,
        "ajax": {
            url: "path to the data source",
            type: 'POST'
        },
        "language": {
            "search": "",
            "searchPlaceholder": "Search..."
        },
        "columns": [
            { "data": "CustomerID", "searchable": false },
            { "data": "Person.FirstName", "searchable": true },
            { "data": "Person.LastName", "searchable": true },
            { "data": "Store.Name", "searchable": true },
        ]
    });
Searching

Read how to use on the client side from here

The searching is performed only on string columns. Therefore the searchable parameter inside the columns property must be set to false. Only the string columns with the searchable parameter set to true will be included in the search.

Individual column filtering

Read how to use on the client side from here.

For all string columns the individual column filter will work as case insensitive search. For other types it will match the exact value. For DateTime types it will match the value with precision to the seconds.

Nested objects

Read how to use on the client side from here.

Custom filters

To use the predefined custom filters the data property of the configuration object must be configured properly link.

The following custom filters are supported on the server side:

  • gt : greater than;
  • gte : greater than or equal;
  • lt : less than;
  • lte : less than or equal;
  • eq : eqaul;
Example:
<div>
    CreditRating: from <input type="number" id="minCreditRating" value="1" class="reload-table" />
    to <input type="number" id="maxCreditRating" value="3" class="reload-table" />
</div>

<div>
    Business Entity ID = <input type="number" id="businessEntityId" value="" class="reload-table" />
</div>

<div>
    Modified Date = <input type="date" id="modifiedDate" value="" class="reload-table" />
</div>

<div>
    Account Number = <input type="text" id="accountNumber" value="" class="reload-table" />
</div>

<table id="SearchResultTable" class="display" cellspacing="0" width="100">
    <thead>
        <tr>
            <th>BusinessEntityID</th>
            <th>CreditRating</th>
            <th>ActiveFlag</th>
            <th>AccountNumber</th>
            <th>ModifiedDate</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>BusinessEntityID</th>
            <th>CreditRating</th>
            <th>ActiveFlag</th>
            <th>AccountNumber</th>
            <th>ModifiedDate</th>
        </tr>
    </tfoot>
</table>

@section Scripts {
    <script>


        var table = $('#SearchResultTable').DataTable({
            "proccessing": true,
            "serverSide": true,
            "ajax": {
                url: "@Url.Action("GetVendorsData", "Vendors")",
                type: 'POST',
                "data": function (d) {
                    d.custom = {
                        "filters": {
                            "CreditRating": { "gte": $('#minCreditRating').val(), "lte": $('#maxCreditRating').val() },
                            "BusinessEntityID": { "eq": $('#businessEntityId').val() },
                            "ModifiedDate": { "eq": $('#modifiedDate').val() },
                            "AccountNumber": { "eq": $('#accountNumber').val() },
                        }
                    }
                }
            },
            "language": {
                "search": "",
                "searchPlaceholder": "Search..."
            },
           "columns": [
               { "data": "BusinessEntityID", searchable: false },
               { "data": "CreditRating", searchable: false },
               { "data": "ActiveFlag", "searchable": false },
               { "data": "AccountNumber", searchable: true },
               { "data": "ModifiedDate", "searchable": false},
            ],
           "columnDefs": [
               {
                   "render": function (data, type, row) {
                       date = new Date(parseInt(row.ModifiedDate.replace("/Date(", "").replace(")/", ""), 10));

                       return date.toLocaleDateString();
                   },
                   "targets": 4
               }
           ]

        });

        $('.reload-table').on('change', function () {
            table.ajax.reload();
        });
    </script>
}

Release Notes

This first release supports the basic functionalities of jquery datatables.

Dependencies

This package has no dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.1.1 1,568 9/14/2018
1.1.0 677 12/26/2017
1.0.0 449 12/7/2017
1.0.0-rc 284 12/7/2017