How to show empty data message in Datatables
JqueryJsonasp.net MvcDatatablesJquery Problem Overview
Suppose i get empty data from server sometimes, i want to display No Data found message in DataTables?. How is this possible?
Jquery Solutions
Solution 1 - Jquery
If you want to customize the message that being shown on empty table use this:
$('#example').dataTable( {
"oLanguage": {
"sEmptyTable": "My Custom Message On Empty Table"
}
} );
Since Datatable 1.10 you can do the following:
$('#example').DataTable( {
"language": {
"emptyTable": "My Custom Message On Empty Table"
}
} );
For the complete availble datatables custom messages for the table take a look at the following link reference/option/language
Solution 2 - Jquery
Later versions of dataTables
have the following language
settings (taken from here):
"infoEmpty"
- displayed when there are no records in the table"zeroRecords"
- displayed when there no records matching the filtering
e.g.
$('#example').DataTable( {
"language": {
"infoEmpty": "No records available - Got it?",
}
});
Note: As the property names do not contain any special characters you can remove the quotes:
$('#example').DataTable( {
language: {
infoEmpty: "No records available - Got it?",
}
});
Solution 3 - Jquery
Late to the game, but you can also use a localisation file
DataTable provides a .json
localized file, which contains the key sEmptyTable
and the corresponding localized message.
For example, just download the localized json file on the above link, then initialize your Datatable
like that :
$('#example').dataTable( {
"language": {
"url": "path/to/your/json/file.json"
}
});
IMHO, that's a lot cleaner, because your localized content is located in an external file.
This syntax works for DataTables 1.10.16, I didn't test on previous versions.
Solution 4 - Jquery
I was finding same but lastly i found an answer. I hope this answer help you so much.
when your array is empty then you can send empty array just like
if(!empty($result))
{
echo json_encode($result);
}
else
{
echo json_encode(array('data'=>''));
}
Thank you
Solution 5 - Jquery
It is worth noting that if you are returning server side data - you must supply the Data attribute even if there isn't any. It doesn't read the recordsTotal
or recordsFiltered
but relies on the count of the data object
Solution 6 - Jquery
This is a just a nice idea. that, you can Add class in body, and hide/show table while there is no data in table. This works perfect for me. You can design custom NO Record Found error message when there is no record in table, you can add class "no-record", and when there is 1 or more than one record, you can remove class and show datatable
Here is jQuery code.
$('#default_table').DataTable({
// your stuff here
"fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) {
if (aiDisplay.length > 0) {
$('body').removeClass('no-record');
}
else {
$('body').addClass('no-record');
}
}
});
Here is CSS
.no-record #default_table{display:none;}
Solution 7 - Jquery
By default the grid view will take care, just pass empty data set.