How to hide datatable on page load and Reset?
How to hide datatable on page load and Reset?
Noodles12
Posts: 113Questions: 41Answers: 2
I am working on datatables page and it works fine. The problem is I want to hide the datatable on page load as this table will have hundreds of entries. Once user selects any of the dropdown filters, the table should load corresponsing filtered rows. When the user selects select Reset filter, the table should hide again. Is there a way to do it? Thanks.
Here is the link to the code: https://live.datatables.net/cowuxusa/1/edit
This question has an accepted answers - jump to answer
Answers
Place the
tableinside adivelement and setdisplay: none;on thediv. Use jQuery show() and jQuery hide() on thedivelement as needed. After using jQuery show() usecolumns.adjust()to make sure the column widths are set appropriately.Kevin
Not built into DataTables, but there is no reason you couldn't put the DataTable into a
display:noneelement and then make that elementdisplay: blockonce the data has loaded.Just make sure you call
columns.adjust()once the table is make visible to allow the size calculations to run.Allan
Thankyou. This is what I tried, but Clear Filter doesn't work anymore.
https://live.datatables.net/xexeraci/4/edit
I don't see an event handler for the clear button (id=test)?
Allan
Sorry, here it is - https://live.datatables.net/mivepalo/1/edit
Add
$('#table-wrap').hide();to the Clear Filters event handler like this:https://live.datatables.net/finezici/1/edit
Also you will want to add
table.columns.adjust();when you show the table.Kevin
Thankyou so much!