DataTables

General information

DataTables is a plug-in for the jQuery library that provides additional features related to HTML tables. It provides a standardized layout that can be customized and interactive features in an easy-to-implement way.

A typical data table in our applications looks like this:

Installation

To be able to use the DataTables plug-in, you need to install the DataTables CSS file and the DataTables JavaScript file. This can be done in different ways. For our projects, we choose to install the files locally. If not already done yet, you can do it by following these steps:

1. Open the following link: https://datatables.net/download/

2. Check "DataTables" in both Step 1 and Step 2

3. In Step 3, click the "Download" tab and check "Minify" and "Concatenate"

4. Click the Button "Download files"

5. Store the downloaded files in the folder "Plugins" > "datatable" (Create the file if it does not exist yet)

6. Add the following two lines of code in the "Layout.cshtml" file of the project:

<link rel="stylesheet" href="~/Plugins/datatable/DataTables-1.12.1/css/jquery.dataTables.min.css" />

<script type="text/javascript" src="~/Plugins/datatable/DataTables-1.12.1/js/jquery.dataTables.min.js"></script>

How to use

The content of the above table (without any features from DataTables) is coded like this:

    <table id="tblWorkOrderNote" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Station</th>
                <th>Creator</th>
                <th>Date</th>
                <th>Remark</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var note in Model.NoteList)
            {
                <tr class="loadNote" data-id="@note.ID">
                    <td>@note.ID</td>
                    <td class="text-nowrap">@note.Station.Name</td>
                    <td class="text-nowrap">@note.CreatedByID</td>
                    <td class="text-nowrap">@note.CreatedDate</td>
                    <td class="text-nowrap">@note.Note</td>
                </tr>
            }
        </tbody>
    </table>

To include the DataTables features, the id of the table is addressed in the following way:

<script type="text/javascript">

    $(document).ready(function () {

        //configure datatable
        $('#tblWorkOrderNote').dataTable({
            ...
        });

    });

</script>

The different features can be included within the "{ ... }" brackets. In the following, a couple of features are described.

Examples

Example 1: Search bar

The search bar feature can be turned off and on by the following code:

"bFilter": true

By default, it is true, so if not otherwise specified to false, there will always be a search bar in the table.

Example 2: Default order

To order the content of the table according to one of the columns, you use the following code:

"order": [[3, "asc"]]

"3" in this example refers to the third column counting from left (where the first column is counted as "0"). So "3" here refers to the 4th column.

"asc" specifies that it should be in ascending order. "desc" would denote a descending order.

Example 3: Sortable Columns

It is also possible to add the functionality of changing the order interactively by clicking on a column. The order will change to the order of the clicked column. By clicking on the same column, it will change the direction of the order, toggling between ascending and descending.

This feature is realized by specifying which columns should be "sortable". Sortable columns have an arrow icon on their head. By default, all columns are sortable. To specify which columns should not be sortable, add the following code:

"aoColumnDefs": [
    { "bSortable": false, "aTargets": [0, 1, 4] }
]

"bSortable": false specifies that the following will be referring to the attribute of being not sortable.

The numbers after "aTargets" refer to the columns that should be affected by the previously specified attribute, so in this case, they are the columns that should not be sortable. This means, in this example, only the 3rd (denoted by "2") and the 4th (denoted by "3") column are sortable.

All the provided features and their implementation can be found in the DataTables website: https://datatables.net/

Video