Reloading the table data when data is added, deleted or edited

mehulved

I am having a issue trying to reload data in my table when entries are added, removed or edited. All these functions happen via ajax post calls in jQuery. I am using the fnReloadAjax plugin.
Here's the debug data from bookmarklet http://debug.datatables.net/otoqen

Here's the relevant code snippets

HTML
[code]



Name
Price





Ships


Delete |


Edit




100000











Add Group



[/code]

jQuery
[code]
var oTable
jQuery(document).ready(function($) {

/* Reload data in datatable when value is updated */
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null ) {
oSettings.sAjaxSource = sNewSource;
}

// Server-side processing should just call fnDraw
if ( oSettings.oFeatures.bServerSide ) {
this.fnDraw();
return;
}

this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];

this.oApi._fnServerParams( oSettings, aData );

oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );

/* Got the data - add it to the table */
var aData = (oSettings.sAjaxDataProp !== "") ?
that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;

for ( var i=0 ; i

allan

What's the issue you are having? JS error, wrong row being edited? Something else?

Allan

mehulved

The new entries that are being added to the table are not picked up. So now, if someone tries to do sort or filter on it, then it won't work. That entry disappears from the view. One has to refresh the page to be able to show it.

heptagone

I have kinda the same issue but in a simpler thread... please help :)

allan

Sounds rather like this: http://datatables.net/faqs#append but a link to a test case would be need to confirm.

mehulved

Thank you very much Allan, That worked perfectly. I have added fnAddData before fnReloadAjax and it's updating the div now.
Appreciate the great work and prompt help.

mehulved

Oops! There's still one issue. The data I get back is in HTML format. It's a table row. fnAddData expects json. I am trying to use the fnAddTr plugin instead but it throws an error
Uncaught TypeError: Object has no method getElementsByTagName

mehulved

The add row issue is also solved as shown in this thread http://datatables.net/forums/discussion/10748/fnaddtr-add-row-from-ajax-data/p1

mehulved

So add and delete are working fine now.
I have edit working but it has one issue. My column looks like this

[code]

Ships


Delete Group |


Edit



[/code]

But I get only the value for div class groupname and want to update only that. If I use the following code
[code]
oTable.fnUpdate([ groupname, perhead ] , index);
[/code]
it replaces Ships with the new value in the td class groupfield.
Using jQuery, so far, I used to do
[code]
$('.groupname').text(groupname);
[/code]
So it used to leave rest of the items as they are. How can I manage to do that?

mehulved

Bump! Still stuck on the last part.
Additionally, the newly added entries do not get sorted alphabetically. They're sorted at the top.