Questions about the draw() method

priteshmhatre

I am using a datatable to show live stock prices. The the data changes several times per second. I have paging & searching turned off.

I tried following variations to update row data whenever I get a new tick:

• row().data(dataObj)
• row().data(dataObj).draw()
• row().data(dataObj).draw(false)
• row().data(dataObj).draw('page')

I do not see much visible difference of using draw() method.

With our without draw() method, the data in the table seems to be updating pretty much same. So I have a couple of questions.

1. Does the table visually update changes made to its data even when we do not call the draw() method? It seems so from obvervation.
2. I have buy/sell buttons in each row of the table. These buttons sometimes need multiple clicks for the click event to be fired. I am assuming this is because the entire row is being updated (maybe 1 or 2 times every second). None of the 4 options mentioned above seem to help with the issue. What would be the best way to update the table?

kthorngren

1. Using row().data() will update the row's data and the display but won't apply the table's current sorting, searching and paging. Using draw() will update the table's sorting, searching and paging. If you are not concerned about applying these to the table then draw() shouldn't be needed. If you are looping through the rows to update the data don't chain draw() off row().data(), ie row().data(dataObj).draw(). Use draw() after the loop to execute only once.

2. I would guess that using jQuery delegated events, like this example, would work well. These events are applied only once. If you are re-applying the event handlers each time you update the row(s) then there might be a delay before the handler is applied. There could be something else going on. Please post a link to your page or a test case replicating the issue so we can help debug.
   https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

priteshmhatre

Thank you Kevin.

First point is clear.

Here is my test case link of live stock prices.
https://jsfiddle.net/priteshmhatre/tys3gxa8/69/

Steps to reproduce:
1. Run the fiddle
2. Try clicking on the buttons inside the table
3. Monitor the console
4. You'll notice that not every click results in click event being called
5. If you reduce the speed at which prices are updated then you'll notice that more click events start to register. But in real world scenario, I cannot reduce the speed of live prices as I need to update the table every time the price changes in the stock exchange.

kthorngren

I suspect the problem is with timing and the delay in rewriting the buttons into the DOM. You can use cell().data() to update specific cells, like this:
https://jsfiddle.net/d2f6L9wq/

The LT row click events should fire each time. To increase efficiency you might not want to update the first column if that data doesn't change.

Kevin

priteshmhatre

Yes, absolutely. It makes sense.

Thank you