Datatables Makes Things Easy

This post is based on my self-research and Jerad’s guidance. The things I included here are based on what I looked into, but Datatables have more things to deal with.

Data tables are a jQuery-based library used to make tables look nice and to provide display, searching, pagination and many other facilities. Though the default table can manually do this, this library enhances the performance when handling larger data. This will perform functions such as searching, pagination, and ordering, like an SQL engine does on the server-side; As such, each draw of the table will result in a new AJAX request being made to get the required data.

SERVER SIDE PROCESSING

This is a highly useful feature in Data tables compared to client-side processing, since it can handle large data. To enable this when we initiate the data tables we will set serverSide, processing to true.

{
    "serverSide"
:
    true,
        "processing"
:
    true
}

DOM STRUCTURE & OTHER FEATURES

DOM structure is used to define the structure of the table and the positioning of the table. Check the link for clear reference 3.

The height of Data-table can be added by ScrollY value that is generally 200-400px in size as needed for the scenario.

When fetching data from an ajax call and displaying it in a table, we often use column descriptions; first we mention title, then data (this data should correspond to the data received in JSON) lastly if we want to render any changes (Eg: convert timestamp to user-readable Date time we can do by render, this can also be placed in columnDef.

Column[{
    "title": 'Date and Time',
    "data": 'timestamp',
    "render": function (format....
)
}]

Hidden columns can be achieved by defining the column definition by specifying the target id (normally id starting from 0) and set the property “visible” to false, and in case you omit searching (since there is a default search provided in data tables) you can also set the searching property to false. But for some cases when you need to get a value from a hidden column, make it true or don’t mention it in the column definition (columnDef) 4, 5.

ColumnDef[{
    "target": [2], // this can be multiple columns  
    "visible": false,
    "searching": false
}]

We can also add a button to expand and collapse child contents in the data table. For that, we can add column definition with defining class, defaultValue and some others like the below example. And in CSS we can handle the button backgrounds for collapse and expand. And add a bind function for the class on the main function and make it work.6

{
    "className"
:
    'details-control',
        "orderable"
:
    false,
        "data"
:
    null,
        "defaultContent"
:
    ''
}

References

1. https://datatables.net
2. https://datatables.net/examples/data_sources/server_side.html
3. https://datatables.net/examples/basic_init/dom.html
4. https://datatables.net/reference/option/ajax
5. https://datatables.net/examples/basic_init/hidden_columns.html
6. https://datatables.net/examples/api/row_details.html