Sample to demonstrate server side processing with datatables.net
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
DataTablesNetSample
.gitattributes
.gitignore
LICENSE
README.md

README.md

AspNetDatatablesSample

The following sample demonstrates a flexible way of processing data tables generated by http://www.datatables.net.

This example is taken from a much larger application where datatables.net replaced a commercial application. Anyhow the aim is to show how to create data tables and use a .NET handler to manage data I/O besides the ASP.NET framework to reduce framework overhead.

How does it work

Looking at the example there's more or two things that needs to be developed to create a data table in ASP.NET:

  • The table itself (in HTML and JavaScript) and
  • the data provider resposible to provide the data sorted, filtered and paged.

The idea how to make this implementation as flexible as possible popped up while looking at the MVC model binder example.

Creating the HTML part

How tables are generated is described very well in the examples on datatables.net.

The following informarion is necessary to use the data provider in ASP.NET

var table = $('#entityOverview').DataTable({
    "serverSide": true,
    "orderCellsTop": true,
    "width": "100%",
    "ajax": {
        "url": "/DataTableProvider.ashx",
        "type": "POST",
        cache: false,
        "data": function(d) {
            return $.extend({}, d, {
                "provider": "Demo"
            });
        }
    },
    // more table definition stuff
});

Important is the use of the ajax.data parameter. This parameter is a function that adds the provider parameter to the request being sent to the server.

The parameter given here is a unique identifier defined in the implementation of the data provider.

Using table filter

Another enhancement is the possibility to use filters. The backend implementation is generic but the frontend needs to support the filters as well. To enable filtering please provide another header row in the <thead> area that contains the class filter.

Every column that should be filterable should contain the following information (or similar):

<tr class="filter">
	<th data-column-id='Id'>
		<i class='fa fa-filter filter-btn' data-target-column='{column.Name}' data-target='{column.Number}' ></i>
		<input type='text' class='filterstring' placeholder='{column.Name}' data-target='{column.Number}' name='filter-{column.Name}' style='display: none;'/>
		<span class='filter-display' style='display: none;' data-target-column='{column.Name}' data-target='{column.Number}'></span>
	</th>
<!-- ... -->

Backend implementation

In the server code a class needs to be created implementing IDataTableProvicer or even better IDataTableProvider<TKey, TData>. Each class needs to have a uniqe Name property, a couple of functions need to be implemented.

Assigning a backend class to a datatable

This is done by adding the following code to the Page_Load call at the page:

protected void Page_Load(object sender, EventArgs e)
{
    _provider = DataTableHelper.GetProvider(typeof(DemoDataProvider));
    _provider.Initialize();
    _provider.LoadData(Server.MapPath("~/App_Data/MOCK_DATA.zip"));
}

The first line creates an instance of the data provider and registeres the provider at the repository so that the provider can be called from the frontend handler.

The second line initalizes the provider. This call should check if for example columns are defined or static data is available.

The implementing class remains active and in memory for the complete lifecycle of the application. A second call to Initialize should reset a data table

The third line loads the data. The parameters provided are optional and specific to the data table provider.

Additional notes for the demo

  • The generic provider does provide support for int and string data tables.
  • As mentioned above some part of the code has been taken of to keep the example short. For example it makes sense to create columns and headers automatically as the data is available as in DataTableColumn.
  • Demo data has been generated using https://www.mockaroo.com/