The DataTables is one of the many JavaScript libraries we can use to enrich the tables in our web projects. In its basic implementation it allows the user to view, filter and order the data with ease. And better yet, without so much extra work for us. And if you are working with more advanced scenarios, you can customize it without problems.

Let’s see below how to implement it in a simple ASP.NET MVC Core website.

Implementation

The normal implementation is relatively simple. All you need is a data source and a View. However, my implementation has some extra things to consider since I am going for a more flexible scenario. The whole idea is to have the backend do most of the data work and leave the library with the formatting. And for that we will use:

  1. Data source – No matter which. Memory, SQL Server, Oracle. Your choice;
  2. Models and ViewModels – We need some specific objects to make our job easier;
  3. Attributes – Important if we want to control the columns in the DataTable;
  4. Service, Helpers – Used to transform the raw data into something we can use;
  5. Reflection – Because we want the implementation to be as dynamic as possible;
  6. JavaScript configuration – Important as we will need to customize a bit the implementation;
  7. The API – We will load the data via Ajax, so we need a small API to work with;
  8. A View – Because we need to show the DataTable at some point

Data source

If you need to implement a data table it means you have a data source of some sort. In this demo we are going to use in-memory data but it could easily come from any kind of database. Here it is:

As you can see the PersonRepository should return all people (read only) and return the total amount of people in the imaginary “People table”.

Models and ViewModels

Some of these objects should help with data binding, others to help with the data formatting. The most important are:

DataParameters

We will use it to help with the data binding coming from the UI. It contains all we need to filter and order our data.

PersonTableViewModel

Used to shape the Person data coming from the data source into exactly what we need for the UI. It uses some custom attributes to help shaping the data and also some static methods to help with ordering and filtering.

TableViewModel

This is the DataTable itself.

Attributes

Since I am generating the DataTable information on the backend I decided to create some custom attributes to help me with it.

  • Orderable – In case the property has this attribute it means we can order our data;
  • Searchable – The property containing this attribute will be used in the search field;
  • ShowOnDataTable – It allows the property to be shown in the UI. You can also use it to set the order it will appear and a custom column name.

Service and Helpers

The Service is just a small mock of a Service Layer but it could be anything depending on the architecture you are following in your project. The most important is to create a specific method which return values formatted for the DataTable, as you can see below:

Notice that:

  • The method accepts an argument of type DataParameters, which contains the values coming from the UI control;
  • The static methods of PersonTableViewModel are being used to filter and order the data;
  • The return type is a tuple.

As for the Helpers I have 2 classes. The first one is the ExpressionBuilder (bad name, I know), which will help us to build the expression queries for filtering. I am using because since the query is handling the data in-memory. Another scenario where the ExpressionBuilder would be useful is when we are using Entity Framework as we would dynamically build the query before sending to the database.

The other helper is the DataTableHelper. It will prepare both header and content for the UI based on the custom attributes we have in each property of PersonTableViewModel.

Reflection

As you could see I am using a little bit of reflection to get the properties and custom attributes. In this way we would be able to add and remove columns by simply editing the PersonTableViewModel without breaking the UI.

JavaScript configuration

As of now, there is no web without JavaScript. And since DataTables is a JavaScript library we need to do a small configuration. Here we will enable a couple of things:

  • processing – Enables the process indicator;
  • serverSide – Enables server-side processing of data;
  • ajax – Loads the data from an Ajax source. In our case a dedicated method in the HomeController.

The API

There are 2 things we need to make it happen in order to make the DataTable look good. The first is to setup the table headers. We will achieve that by returning a List<string> values when we call the page. That is done by using the BuildDataTableHeader method we made in the DataTableHelper, as seen below:

The second is to return the content data. We will create a specific method for that and name it GetPeopleData:

The idea here is to load the data and pass it into the BuildDataTable method in order to make it compatible with the DataTable library. The library, then, will get the data we are returning and format it into the HTML table.

A View

Our view should be very simple – a <table> tag, a CSS call and some JavaScript configuration. However, since we are aiming for some flexibility, let’s tweak the View a little bit:

From the top of the View:

  • @model List<string> – Since we need to load the table headers in the beginning, we are passing it in the first request.
  • The @foreach loop – Not the best place to do this but we need to prepare the header and footer tags in order to use it in the DataTable
  • <table> – A the simple HTML table with some styles and the header/footer we just created
  • @section Scripts – With the library and our JavaScript configuration

Don’t forget that the data coming via Ajax should match our columns perfectly, thanks to the DataTable script and the preparation we made in the backend.

Conclusion

And here we have, ladies and gentleman. A nice table with search and ordering:

The demo may seem overly complex for such a small thing but it scales quite well. I am using it both in my website and in a project at work with zero problems so far. Of course, some tweaks will be necessary when adapting to your project but it should be a no brainer. And once you grasp the concept it’s very easy to replicate it.

Leave a comment

Your email address will not be published. Required fields are marked *