Datatables are not displaying "No data" when there is no data

markMathews1989

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.

kthorngren

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

markMathews1989

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?

kthorngren

Thats where I would start. One HTML table for each tab. Each table with its own id.

Kevin

markMathews1989

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.

kthorngren

Should be possible. You are calling the rowData function when using ajax.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 use clear() before returning. Just a guess.

Kevin

markMathews1989

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!