I am using jQuery DataTables to display data in ASP.NET Core 6 MVC project. I want to display a custom message when no data was returned from the SQL query, instead of the default text, “Showing 0 to 0 of 0 entries”. I tried a couple of methods as shown here.
Method 1, using the language option:
var dataTableOptions = {
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
"columnDefs": "",
"processing": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"pageLength": 10,
"language": {
"emptyTable": 'No records found!',
"zeroRecords": 'No records found!'
},
//More config code here
}
Method 2 displaying the message as a text of a div:
<div id="emptyRows">No records found!</div>
var myDataTable = $('#riskReport').DataTable(dataTableOptions);
if (!myDataTable.data().any()) {
//alert('No records found!'); //This works
//$('#riskReport_info').text('No records found!'); //This didn't work
$('#emptyRows').show();
}
else {
$('#emptyRows').hide(); //Code never reached here
}
The second method displays the ‘No records found!’ as the text of the div, when no data was returned by the SQL. However when the search method was changed such that data was returned successfully, still the ‘No records found!’ is displayed since the div is not hidden. As an additional option, I tried to set the text of #riskReport_info, which is the id used by the DataTable natively to display the default message.
1
For Method 1, ensure emptyTable and zeroRecords are correctly set and that no server-side processing is interfering.
For Method 2, bind the draw event to show or hide the message after each table update:
myDataTable.on('draw', function () {
if (!myDataTable.data().any()) {
$('#emptyRows').show();
} else {
$('#emptyRows').hide();
}
});
After my test, if you want to display a custom message to replace the default text, you need to use the info and infoEmpty properties in the language option to hide this part of the information, set them to empty strings, and then configure the emptyTable property and zeroRecords property as custom messages:
emptyTable: means when there is no data when the table is initialized.
zeroRecords: means when there are no matching results for the search.
As shown in the following example:
@model IEnumerable<Product>
@{
ViewData["Title"] = "Product List";
}
<h2>@ViewData["Title"]</h2>
<table id="productTable" class="display">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
@foreach (var product in Model)
{
<tr>
<td>@product.Id</td>
<td>@product.Name</td>
<td>@product.Price</td>
</tr>
}
</tbody>
</table>
@section Scripts {
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
var dataTableOptions = {
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
"processing": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"pageLength": 10,
"language": {
"emptyTable": 'No records found!',
"zeroRecords": 'No matching records found!',
"info": "",
"infoEmpty": ""
},
};
$('#productTable').DataTable(dataTableOptions);
});
</script>
}
when there is no data when the table is initialized:
when there are no matching results for the search:
At the same time, if you want to hide information such as “(filtered from X total entries)”, you can set the infoFiltered property in the language option to an empty string to hide this part of the content.
About your second method:
You can use drawCallback to handle dynamic data, as shown in the example:
<h2>@ViewData["Title"]</h2>
<div id="emptyRows" style="display:none;color:red;">No records found!</div>
@section Scripts {
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
var dataTableOptions = {
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
"processing": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"pageLength": 10,
"language": {
"info": "",
"infoEmpty": "",
"infoFiltered":"",
},
"drawCallback": function (settings) {
var api = this.api();
var rows = api.rows({ filter: 'applied' }).data().length;
if (rows === 0) {
$('#emptyRows').show();
} else {
$('#emptyRows').hide();
}
}
};
$('#productTable').DataTable(dataTableOptions);
});
</script>
}
When the query does not exist data:
When the data exists: