Is it possible to hide a table when it doesn't have any data(rows) inside? I'm using the query datatables plugin.
I couldn't find any option in the documentation.
Is it possible to hide a table when it doesn't have any data(rows) inside? I'm using the query datatables plugin.
I couldn't find any option in the documentation.
Despite good suggestions I think there still needs (another) answer.
Using dataTables a <table>
will never be empty - or :empty
- since dataTables enforces you to have a <thead>
and a <tbody>
It is not enough to hide the <table>
, you must hide the *_wrappper
also - the <div>
that contains the styled table, pagination, filter-box and so on.
You can take advantage of fnInitComplete
:
$('#table').dataTable({
//initialization params as usual
fnInitComplete : function() {
if ($(this).find('tbody tr').length<=1) {
$(this).parent().hide();
}
}
});
This will hide the dataTable and all its autogenerated content, if there is no rows holding data in <tbody>
.
[See comments for clarification] Then you need a completely other approach. This works in Chrome and FireFox, cant tell for IE :
Forget about fnInitComplete
, use the following code instead :
var dataTable = $('#table').dataTable();
$("#table").on('DOMNodeInserted DOMNodeRemoved', function() {
if ($(this).find('tbody tr td').first().attr('colspan')) {
$(this).parent().hide();
} else {
$(this).parent().show();
}
});
//this shows the dataTable (simplified)
dataTable.fnAddData(
['a','b','c','d','e']
);
//this hides it (assuming there is only one row)
dataTable.fnDeleteRow(0);
$(document).ready(function () {
$('#datatable1').dataTable({
fnDrawCallback: function () {
if ($(this).find('.dataTables_empty').length == 1) {
$('th').hide();
$('#datatable1_info').hide();
$('#datatable1_paginate').hide();
$('.dataTables_empty').css({ "border-top": "1px solid #111" });
} else {
$('th').show();
$('#datatable1_info').show();
$('#datatable1_paginate').show();
}
}, "oLanguage": { "sZeroRecords": "<p style='margin:0px !important'><a href='#' class='btn btn-success'>Add new</a></p>" }
});
});