How to hide datatable on page load and Reset?

Noodles12

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

kthorngren

Place the table inside a div element and set display: none; on the div. Use jQuery show() and jQuery hide() on the div element as needed. After using jQuery show() use columns.adjust() to make sure the column widths are set appropriately.

Kevin

allan

Not built into DataTables, but there is no reason you couldn't put the DataTable into a display:none element and then make that element display: block once 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

Noodles12

Thankyou. This is what I tried, but Clear Filter doesn't work anymore.

https://live.datatables.net/xexeraci/4/edit

allan

I don't see an event handler for the clear button (id=test)?

Allan

Noodles12

Sorry, here it is - https://live.datatables.net/mivepalo/1/edit

kthorngren

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

Noodles12

Thankyou so much!