Datatables Makes Things Easy
Published:
This post is based on my self-research, Jerad’s guidance. The things I included here are based on the things I looked in, but Datatables are more things to deal with.
Data tables are a jquery based library that is used to make the tables look nice and display, searching, pagination and other lots of facilities. Though the default table can manually do this stuff, this library enhances the performance when handling the larger data. This will do function such as searching, pagination, 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 was a highly useful feature in Data table compare 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 ajax call and displaying it in table, we often use column description first we mention title, then data (this data should be correspondent 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 also can be placed in columnDef also.
Column[{
"title": 'Date and Time',
"data": 'timestamp',
"render": function (format....
)
}]
Hidden columns can be obtained by defining the column definition by specifying the target id(normally id starting from 0) and make the property “visible” to false, and in case if you omit searching (since there is a default search provided in data tables) you can make searching property also to false. But for some cases when you need to get value from hidden make it as true or don’t mention it in 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 bind function for class on the main function and make it work.6
{
"className"
:
'details-control',
"orderable"
:
false,
"data"
:
null,
"defaultContent"
:
''
}