An Easier Way To Update DT Data Without Using jQuery Selectors

JRomeo

Hi. Is there any way to disable DT from completely rewriting the DOM when there are changes made to a row or cell? I ask because I was using DT quite easily as a spreadsheet, each cell having an <input type="text"> field that onblur would recalculate the value of other text fields. Using jQuery and the DOM, this went quite well. The major drawback occurs when paging is introduced i.e., Next/Prev n records. The text fields on the page currently in view were updated exactly as planned. However, related fields not on the page in view did not exist until their page was displayed by clicking Prev or Next. So, if I load a table in the beginning with 50 rows and only display 10, only the 10 rows in view will exist in the DOM, but I frequently need to make changes to the text field values rows that are not in view. Only when the correct page was displayed does DT write to the table. I can't make changes this way. .

I then focused my attention on changing data stored in rows and cells accessed this way:

  var table = $('##example').DataTable();

  // Once the row is known, cell data can be read like so...

   var name      = table.row(this).data()[1];
   var position  = table.row(this).data()[2];
   var current   = table.row(this).data()[3];

It's a lot more work. I've made some headway, but have found it cumbersome to pull the data from each cell, process the number it contains, update the contents using HTML for the entire text field, then redrawing the cell/row. It's been a nightmare, and not for lacking of trying. Any advice you may have would be welcome. Thanks.

tangerine

I was using DT quite easily as a spreadsheet

I can't resist asking: Why not use an actual spreadsheet?

JRomeo

Need in-house spreadsheet functionality that can perform cascading updates to hierarchical row data. DT seemed like a good choice.

allan

Is there any way to disable DT from completely rewriting the DOM when there are changes made to a row or cell?

No. If you want to make a change, you need to use the DataTables API to tell DataTables that the value has changed. Otherwise it doesn't know that the DOM has changed.

Having said that, you can make the change in the DOM and then use the row().invalidate() or cell().invalidate() method to tell DataTables to update its data store from whatever is now in the DOM.

Allan