How to show empty data message in Datatables

Question

Suppose i get empty data from server sometimes, i want to display No Data found message in DataTables?. How is this possible?

Daniel · Accepted Answer · 2015-08-10T09:00:17.687

149

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

edited Aug 10 '15 at 09:00

answered Jan 17 '13 at 10:45

Daniel

36,833
10
119
200

Thanks Daniel, hey can you pls help me on this question i.e http://stackoverflow.com/questions/14376692/loading-script-from-js-file. i hope u will have idea. its related to datatable – Naruto Jan 17 '13 at 10:47
Thanks, Daniel, how can we show custom message in cell for empty record attributes. – codemilan Apr 08 '15 at 07:05
2

@codemilan, you should google for Column rendering , see this https://datatables.net/examples/advanced_init/column_render.html , look at the js code that renders the first column, in your case you can add a check for empty column and render whatever you want for that cell – Daniel Apr 08 '15 at 20:40
@Daniel pls check this . Thanks https://stackoverflow.com/questions/41431205/why-does-datatable-doesnt-show-empty-data-message – Jan 02 '17 at 17:52
datatable will throw alert before user sees this, any workaround? – greendino Nov 15 '22 at 03:15

score 17 · Answer 2 · answered Jul 31 '15 at 08:45

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?",
    }
});

`infoEmpty` is actually for the info part of table. see this [jsfiddle](https://jsfiddle.net/jeffxiao/hnj8yusm/1/) — XoXo, May 24 '17 at 15:48

score 4 · Answer 3 · answered Mar 19 '18 at 18:57

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.

score 2 · Answer 4 · answered Sep 24 '19 at 07:34

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

score 1 · Answer 5 · answered Oct 19 '16 at 19:52

1

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

answered Oct 19 '16 at 19:52

Antony

3,875
30
32

my data set return data =null recordsTotal = 0 recordsFiltered =0 but that time dataTable doesnt show any message. its stuck on processing . how can i show default 'no result found ; message when data=null. pls advice – Jan 02 '17 at 17:47
You can set processing:false I believe as a parameter and your data returned must have a 'Data' key in the result set. – Antony Jan 03 '17 at 13:50

score 1 · Answer 6 · answered Jun 12 '19 at 05:25

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;}

and here is Official link.

score 0 · Answer 7 · answered Jan 17 '13 at 10:16

0

By default the grid view will take care, just pass empty data set.

answered Jan 17 '13 at 10:16

Naruto

9,476
37
118
201

How to show empty data message in Datatables

7 Answers7

Linked