.draw() not working

benjaminsuch

Here is the example:

https://codesandbox.io/s/trusting-chandrasekhar-usenq

So why exactly is .draw() not working? The drawCallback never fires and the table shoes the records in the wrong order. In the console you can see the correct ordered data.

I thought by calling ".draw" I would update the DataTable.

colin

Hi @benjaminsuch ,

drawCallback is a config option, not an event. For the event, use draw, like this here.

Cheers,

Colin

newclique

benjaminsuch, did you ever figure this out? The datatables person / people refuse to address this as an issue. Up through 1.10.15 it still did not work. I have not tried 1.10.20 but I will later this week.

The only thing I have ever been able to rely on to redraw the entire table is to completely destroy it with jQuery via $('#table-id-here').clear() and then re-draw it with $('#table-id-here').dataTable(options)

The only time I have had luck with draw() is when I've updated the data on a row or removed a row. The issue seems tied to the way datatables caches underlying data and then detects changes to that data.

Just to be clear to anyone thinking "why else would you want to redraw the table", oftentimes a render formula for a column relies on data outside the table, i.e. a TaxRate or Discount on a purchase order header. When something external to the table changes that impacts the values on the individual rows, a draw() needs to do exactly that: redraw the table.

kthorngren

@newclique In this example you can see the draw() API redraws the table each time the button to execute draw() is clicked.

The only thing I have ever been able to rely on to redraw the entire table is to completely destroy it

What are you wanting to happen when using draw() that doesn't happen?

Maybe you can describe the problem details or provide a test case showing the issue.

I have never seen draw() not perform as expected and I use Datatables on a daily basis.

Kevin

newclique

Thank you for responding.

If I have three columns, Quantity, Unit Price, and Ext Total on each row of the table, Quantity and Unit Price are bound to data for the row. Ext Total has a render function that calls another function which is closured in. The closured function applies a Tax Rate and a Discount to the formula.

When the table is first created it works fine. As soon as the Tax Rate or Discount are changed in another part of the screen (obviously not within the datatable), I try calling the draw() function. This doesn't work. Nothing happens. If I put a breakpoint or console.log() inside the datatables render function, it is never hit.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

@newclique

Sorry I forgot the link to my example. Here is an updated link:
http://live.datatables.net/dipogeza/1/edit

As soon as the Tax Rate or Discount are changed in another part of the screen (obviously not within the datatable), I try calling the draw() function. This doesn't work. Nothing happens. If I put a breakpoint or console.log() inside the datatables render function, it is never hit.

If the table data is not updated then there is no reason for the columns.render function to execute. This would be inefficient. Sounds like this is your case.

There are ways to do what you want without resorting to destroying the Datatable. Either you can update a row or cell data. Or you can use rows().invalidate(). Either of these will cause columns.render to run when the table is drawn.

The example I posted shows what happens when just using draw(), rows().invalidate() and updating one of the rows.

Kevin

newclique

Ah, cool. I'll try invalidate again. I tried it a couple of times with no luck. Honestly, draw() needs a 'force' parameter that does what invalidate does imho. That's sort of industry standard in a lot of cases (PowerShell comes to mind). At any rate, if invalidate doesn't work for me I'll try to make a test case. I'm swamped at the moment but I'd like to contribute to this project because overall it's been very helpful for me.

allan

There isn't too much difference between rows().invalidate().draw() and something like draw({invalidate: true}) in my opinion.

The advantage of rows().invalidate() / row().invalidate() is that you can target specific rows rather than forcing all to be invalidated - which can noticeably inprove performance on large datasets.

Allan