Table headings repeat after destroying and redrawing DataTable

sjw01

Test Case: http://live.datatables.net/zigijote/1/

I have a DataTable which accesses a JavaScript array to display data - works fine.

I have added a filter on the page (see top left: All Sale Types) which uses Ajax to go back to the server (not included in demo), gets filtered data and then redraws the DataTable.

Problem: When I do this and redraw the table, it duplicates the row headings into the second row.

You'll notice on original draw - it appears as expected
BUT - when you redraw, it adds extra headings into second row.

How do I stop this?

colin

It looks like you need to remove the header rows explicitly as they were added outside of DataTables's control. You can do that with:

  $('table tr').remove();

See updated example here: http://live.datatables.net/zigijote/2/edit

Colin