DataTable is reinitialised every time the reactive query changes

[francisbyrne]

@austinrivas I'm using the fnInitComplete callback to do some DOM manipulation (basically to add some custom buttons to the table header along with the filter and length). However, it appears this is not playing nicely with the reactive query because every time it changes, the callback is re-run.

I just thought this was a little weird because using other elements such as the table length, the pagination or the filter don't cause the callback to be re-run.

I know the DOM manipulation is a bit of a hack anyway, so it's not a huge deal, but I just thought I'd flag it.

[gjolund]

Would you mind putting together an isolated example of what you are trying to do?

[francisbyrne]

I've created a simplified example here:
https://github.com/francisbyrne/datatables-example

Check it out, then mrt install; meteor.

You'll see a table with a checkbox above it, which is prepended to the header via fnInitComplete callback.

When you check the box, the table redraws without the checkbox now (because it's no longer in its initial position).

However, if you reload the page and use the filter, length or pagination, the checkbox doesn't disappear.

[gjolund]

Ok, I see what the problem is.

I am currently destroying and rerendering the table whenever the query changes by using the DataTables destroy option. However it seems like redrawing the table using the drawCallback is a better approach.

I'll try to implement this using your example asap.

[hamxiaoz]

I have a similar problem. I use initComplete for row clicking and get _id of current clicked row. If I update a displayed property externally, the column displays the correct text reactively but after that the row clicking event doesn't work at all.

Currently the workaround is to use drawCallback.