Some Simple and Advanced Features of jQuery Datatable

|
| By Webner

In this blog, I am going to share some simple and advanced features of jQuery datatable. These are:

1. Custom table message in case no records exist.
2. Set Default records length.
3. Set search filter by default.
4. InitComplete parameter of datatable.
5. Change css dynamically when data loaded in table.
6. Make Table Header fixed.
7. Make first column data fixed.

I have fetched data from database in a jQuery datatable, can be seen in below screenshot:

Let’s start with the features that can be used in jQuery datatables:

1. Custom datatable message in case no records exist:

In screenshot 1, we have 29 records in table “users”.
Currently we have data in database but suppose there is no record in database, at that time by default, jQuery Datatable will show us a message “No matching records found” as shown in screenshot 2:

We can also customize the “no records found” message, for that what we have to do is change that message by passing language parameter to dataTable function.
Something like this:

$('#UserTable').dataTable({
// Rest all parameters will be same that are used while creating a datatable
"language":{
"zeroRecords": "No users exist"
}
});

2. Set Default records length:

jQuery datatable show by default 10 records when data is loaded into table first time. 25, 50 or 100 records can also be displayed in table , that is whenever we select 25, 50 or 100 from Show dropdown:

From screenshot 2, we can see that dropdown marked with red rectangle shows 10, by default and accordingly 10 records are shown in datatable.
We can customize it to 25, 50 or 100 whenever data is loaded first time by calling dataTable() function in script by passing pageLength parameter as shown below:

$('#UserTable').dataTable({
// Rest all parameters will be same that are used while creating a datatable
"pageLength": 25
});

Now, 25 records will be displayed whenever data is loaded first time into table having id “UserTable”.

3. Set search filter by default:

By Default, search filter is blank when we apply dataTable() function on table having id “UserTable”. Whenever, we type something in search input, then records will be filtered accordingly.
Suppose I typed “abc” in search input, then only 3 records are displaying in datatable as shown in following screenshot:

Sometimes, situation arises that we have to show few records when data is loaded into table first time or when dataTable function is called first time. For example, we have applied search filter on data in table before applying save operation on some data (somewhere else) in web page by clicking on submit data and we know submit click generally causes page reload and we want to maintain search input already filled.

With following script, we can set search filter already filled so that data is loaded according to search filter whenever dataTable() function is called:

dataTable = $('#UserTable').dataTable({
// Rest all parameters will be same that are used while creating a datatable
});

dataTable.fnFilter(“abc”); // With this line, search input will already be filled with text “abc” before data is loading into table and data will be loaded according to search filter.

4. InitComplete parameter of datatable:

InitComplete parameter is used in dataTable() function to do something immediately after data is loaded or we want to perform some action based on if records exist.

For example, suppose our requirement is to add download button in webpage whenever records are fetched in datatable (or if records exist).
In that case we can use InitComplete parameter:

dataTable = $('#UserTable').dataTable({
// Rest all parameters will be same that are used while creating a datatable
"initComplete": function(settings, json){
if(json.data.length > 0){ //This condition checks if data exists
addDownloadLink = '<div class="row" style="text-align:center;"><a href="download.php">Download User Data</a></div>';
$('body').append(addDownloadLink);
}
 }
});

In this script, I have used if condition to check for record existence. This is not mandatory to use. It is just a sample, you can add any condition according to your requirements whenever data is loaded.

You can see the results in the following screenshot:

5. Change css dynamically when data loaded in table:

We can also change css of data loaded in datatable. This is generally used when we are not aware about how many columns of data will be loaded in datatable as data is generally dynamically loaded. Let’s see how we can change css of data loaded:

dataTable = $('#UserTable').dataTable({
// Rest all parameters will be same that are used while creating a datatable
"createdRow": function (row, data, index) {
$('td:nth-child(2)', row).css("font-weight", "bold");
}
});

From screenshot 6, we can see that all data in second column “Name” is bold now due to css applied with createdRow parameter.

6. Make Table Header fixed:

Please look at the screenshot 7 to understand why we need fixed table header row.
From the screenshot 7, it can be observed that when we have records more than 10 then we have to scroll the page to view data but at that time we are not able to see the column heading:

So in that case to view column headings, we need to make header columns fixed.
We can achieve this by adding “scrollY” parameter. Table header becomes fixed and only data rows becomes scrollable:

dataTable = $('#UserTable').dataTable({
"processing": true,
"scrollX": true,
“scrollY”: 300
// all parameters are same as mentioned already in dataTable() function in script
});

From screenshot 8, it can be observed that the table header is fixed and only data rows are scrolling. In screenshot, we are viewing 4th record and header is in fixed position:

7. Make first column data fixed:

Please look at the screenshot 9 to understand why sometimes we need first column data to fixed:

From screenshot 9, we can observe that when I scroll horizontally to view data which is hidden at right side, then it becomes difficult to understand about which person we are viewing data. So, we can make first column “Name” as fixed. Let’s see how we can achieve this.

First add new css file
“https://cdn.datatables.net/fixedcolumns/3.2.3/css/fixedColumns.dataTables.min.css”
and js file “https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.js”
in head tag and then add parameter “fixedColumns” in dataTable function as follows:

dataTable = $('#UserTable').dataTable({
// all parameters are same as mentioned already in dataTable() function in script
"fixedColumns": true
});

By doing this, we can achieve data view as shown in following screenshot:

From screenshot 10, it can be observed that first column “Name” is fixed and we can scroll to right and now this can be seen that which row is showing the data about which person.

Leave a Reply

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