Datatables are not displaying "No data" when there is no data
Datatables are not displaying "No data" when there is no data
markMathews1989
Posts: 43Questions: 7Answers: 2
Hello,
I've run into a problem where my datatables are not displaying no data. I use 1 datatable that loads different data sets using an ajax request. I currently have 4 data sets. If all data sets have no data, then I receive the "No data" message. If data exists on 1 data set but not the others, the same data set that was last selected will display for all data sets.
For Ex:
I have 1 datatable and a nav menu with 4 tabs. When any of the tabs is selected, a new data set fills the table using the ajax.url
$(document).ready(function() {
var table= $('#table').DataTable( {
ajax: {
url: '/data?dataType=analysis&category=SALES',
dataSrc: ''
},
info: false,
order: [[ 2, "asc" ]],
paging: false,
searching: true,
scrollCollapse: true,
columns: [
{
data: "id"
},
{
data: "department"
},
{
data: "date"
},
{
data: "report"
},
{
data: "week"
}
]
} );
This is how I load the data sets with a jQuery click handler and ajax request:
$(".sales-li").click(function() {
table.ajax.url('/data?dataType=analysis&category=SALES').load(rowData);
});
$(".finance-li").click(function() {
table.ajax.url('/data?dataType=analysis&category=FINANCE').load(rowData);
});
$(".marketing-li").click(function() {
table.ajax.url('/data?dataType=analysis&category=MARKETING').load(rowData);
});
$(".accounting-li").click(function() {
table.ajax.url('/data?dataType=analysis&category=ACCOUNTING').load(rowData);
});
If any of the tabs does not have data, the last clicked tab with data will remain on the screen
For EX:
If Accounting has no data, but I am on the Marketing tab and try to navigate to the Accounting tab, the Marketing data will display under the Accounting tab. Now, if I open up the browsers inspect tool, I see that I am landing on the right tab, but the data does not clear out.
Answers
It looks like you are using the same HTML id, (
#table), for each table:var table= $('#table').DataTable({...}). HTMl does not support using the same ID more than once on a page. Not sure what you are using for tabs but this example may help:https://datatables.net/examples/api/tabs_and_scrolling.html
If this doesn't help then please post a link to your page or a test case replicating the issue. This way we can see what you have and how it is behaving.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Thanks for your response.
From the example, I see that there are multiple HTML tables being created. Since, I have 4 data sets, I should be using 4 unique HTML tables?
Thats where I would start. One HTML table for each tab. Each table with its own
id.Kevin
Is it possible to continue the way I am currently doing it with 1 table and continue to load the data as I am currently doing? Everything works fine other the No data on an empty data set.
Should be possible. You are calling the
rowDatafunction when usingajax.url().load(). I would start by looking at that function to see what it does when loading data. Maybe it simply returns if there is no data where it might need to useclear()before returning. Just a guess.Kevin
I just figured it out. I had to make some modifications to the Java and not the DataTable. The issue was, we were returning 204 no content whether there was data or not. Just changed it to pass an empty array if 204 and 200 on success.
Thanks for the help!