Showing previously hidden rows causes layout to change

chris_3eleven

Hi,

I've just started using DataTables in conjunction with TablePress.

The client I'm working for requires that the first x rows of a particular table be shown, with a button which, when clicked, reveals the rest. Exhibit A: https://imgur.com/a/8R3Ewdz

When I click the "See More" button underneath the table I apply a class to the table which unhides the previously hidden rows, but this causes the table's layout to change. Exhibit B: https://imgur.com/a/lkYyD9g

I have tried to add some JS which calls ".DataTable()" on the table when the button is clicked, and then ".draw()" once the class which reveals the remaining rows has been added, but I get a ".draw is not a function error."

Any help would be greatly appreciated.

Many thanks in anticipation.

kthorngren

Datatables doesn't support hidden rows and doesn't know about them. It might be possible to make the hidden rows work but it would be better to use Datatables search functionality. You can use search.search to set the initial search to display only the desired rows. Then you can use search() to clear the search when the button is clicked.

".draw()" once the class which reveals the remaining rows has been added, but I get a ".draw is not a function error."

Without seeing a running example its hard to say why this is happening. If you still want to try the hidden row approach you could try columns.adjust() instead.

If you continue to have problems please post a link to your page or a test case showing the issue. Keep in mind that the Datatables developers aren't going to fix any issues if you are hiding rows via HTML although someone may be able to help you with your code.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

chris_3eleven

Thanks, I'll give that a go.