How can I prevent the jquery dataTable plugin from adding row and message when there is no data

Question

Our product owner would like the our empty tables to display just table header when there is no data in table. I can't seem to prevent dataTable from creating a row with "empty..." message.

Here is the code I use to initialize the dataTable. I know some things here are wrong. I have been experimenting. :)

$('#InBox').dataTable({
    "bFilter": false,
    "bPaginate": false,
    "bLengthChange": false,
    "bInfo": false,
    "oLanguage": {
        "sEmptyTable": '',
        "sInfoEmpty": ''
    }
});

Here is some code I tried to put in the init function of the dataTable, but I am not sure how to get it to work.

/* Table is empty - create a row with an empty message in it */
            var anRows[0] = document.createElement('tr');

            if (typeof oSettings.asStripClasses[0] != 'undefined') {
                anRows[0].className = oSettings.asStripClasses[0];
            }

            var nTd = document.createElement('td');
            nTd.setAttribute('valign', "top");
            nTd.colSpan = oSettings.aoColumns.length;
            nTd.className = oSettings.oClasses.sRowEmpty;
            if (oSettings.fnRecordsTotal() > 0) {
                if (oSettings.oLanguage.sZeroFilterRecords.indexOf("_MAX_") != -1)
                    oSettings.oLanguage.sZeroFilterRecords = oSettings.oLanguage.sZeroFilterRecords.replace("_MAX_", oSettings.fnRecordsTotal());
                nTd.innerHTML = oSettings.oLanguage.sZeroFilterRecords;
            } else {
                nTd.innerHTML = oSettings.oLanguage.sZeroRecords;
            }

            anRows[iRowCount].appendChild(nTd);

Dan

Muthukumar M · Accepted Answer · 2012-06-25 16:16:23Z

8

try this

$('#InBox').dataTable({
  "bFilter": false,
   "bPaginate": false,
   "bLengthChange": false,
   "bInfo": false,
   "oLanguage": {
    "sEmptyTable": '',
    "sInfoEmpty": ''
   },
   "sEmptyTable": "There are no records",
 });

otherwise you can try this

$('#InBox').dataTable({
  "bFilter": false,
   "bPaginate": false,
   "bLengthChange": false,
   "bInfo": false,
   "oLanguage": {
    "sEmptyTable": '',
    "sInfoEmpty": ''
   }
 });
$('.dataTables_empty').html("No record found.");

answered Jun 25, 2012 at 16:16

Muthukumar M

1,13610 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dcary Over a year ago

My goal is to not show any message when the table is empty. I would prefer the row not be created. I have a button that adds rows to the dataTable. I will just need to add logic to remove the 'dataTables_empty' row before adding new rows. I used your code. I just set empty quotes so that their was no message. I will mark your answer as answer, if a more elegant way is not presented. Thanks for your help.

Marco Luly · Accepted Answer · 2015-10-15 18:20:58Z

7

If you want to remove the tbody attacched from datatable plugin, you can try this workaround:

$('.dataTables_empty').parent().parent().remove();

answered Oct 15, 2015 at 18:20

Marco Luly

4015 silver badges11 bronze badges

Comments

Bacon Brad · Accepted Answer · 2013-08-28 00:13:44Z

3

Old post, but for the sake of people using search engines looking for the right answer here is how I accomplished.

Delete or comment out the following line from the dataTables source:

anRows[iRowCount].appendChild(nTd);

In the minified version, search and delete:

b[i].appendChild(c);

edited Aug 28, 2013 at 0:13

answered Apr 17, 2013 at 3:46

Bacon Brad

3073 silver badges18 bronze badges

Comments

Meenesh Jain · Accepted Answer · 2015-10-01 06:51:19Z

2

You can customize DataTable plugin by using oLanguange:

"oLanguage": { "sZeroRecords": "-Put customized text-", "sEmptyTable": "-Put customized text-" }

And if you want to remove those, just put these components into null:
"oLanguage": { "sZeroRecords": '', "sEmptyTable": '' }

Hope it helps!

edited Oct 1, 2015 at 6:51

Meenesh Jain

2,5262 gold badges21 silver badges29 bronze badges

answered Dec 5, 2014 at 1:23

spongecode

793 silver badges10 bronze badges

Comments

StingyJack · Accepted Answer · 2017-10-21 14:32:31Z

2

The most current way to hide the messages is by using the language option

$('#loggedMessages').DataTable({
    "language": {
       "emptyTable": ' ',
       "zeroRecords": ' '
     }
 });

answered Oct 21, 2017 at 14:32

StingyJack

19.6k11 gold badges69 silver badges126 bronze badges

Collectives™ on Stack Overflow

How can I prevent the jquery dataTable plugin from adding row and message when there is no data

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related