DOM Object Data Changed, best way to reinitialize Datatables

Starz26

I am updating the data on the page by basically rerendering the DOM table using new data. rerendering Datables successfully refreshes with the new data but the functions specified in the initialization no longer work. i.e. typing in the search box no longer filters, the column sorting is no longer there, etc.

In one of my pages i reinitialize datatables every time the underlying DOM is refreshed by calling the same function the document ready does. Is this the best way?

Starz26

Anyone?

allan

So you are just doing standard HTML / DOM / jQuery manipulation to update the table? You need to use the API to do this: http://datatables.net/api - specifically fnAddData and fnUpdate. Otherwise DataTables doesn't know that a row has been added / removed / edited.

Allan

Starz26

Welll....not sure how to do this...

Again, using this in salesforce, I call a function in my controller for the page to query the data and it rerenders the html content of the page with the updated data.

I know it is an AJAX request but the server handles it all and returns the output html.

How would you handle feeding the data to datatables in this case? currently it just consumes the outputted html and is easy to do.

Are you saying that I have to rewrite my code to use the API to query the salesforce database and return the data to datatables somehow?


If I could safely continue to do what I am doing by reinit the DT that would be best...

Starz26

So if I get the data in a java array....

When i requery the data I would use fnClear and then fnaddData

or is there another way to do it... I will keep searching in the meantime.

Starz26

Ok, so I am able to get the data in a java array, but I am having trouble getting the table. I get the error Requested unknown paramater from the data source row 0....

Here is a snippet of the java array returned, I only want the last two items of each record, the first two are returned by default

{type:'Contact', Id:'xxxxxxxxxxxxxxx', LastName:'This', FirstName:'Test', },{type:'Contact', Id:'xxxxxxxxxxxxxxxxxxxx', LastName:'t', FirstName:'t', }

I am using the example from the DT site to initialize

[code]
j$('[id$=testDTTwo]').html( 'I am HERE ' );

j$('[id$=example]').dataTable( {

"aaData": records,
"aoColumns": [ {"sTitle": "Type"},{"sTitle": "ID"},{"sTitle": "First Name"},{"sTitle": "Last Name"} ]

});
[/code]

Quick ideas are always welcome....I will keep reading in the meantime