Reloading Datatables

faruzzy

Hi,
as I'm new to datatables, I stumbled upon an a reloading issue.
I'm working on an application that requires that the data displayed in the data table be reloaded from the server after some modifications.
In order to accomplish this, I took the following approach.

[code]
var app = {

// .. some code on before
var data;
getAllData: function(param) {
return $.ajax({
type: "POST",
url: "/Services/SerialNumberLookupService.aspx/GetSerialWorkOrder",
data: JSON.stringify(param),
contentType: "application/json; charset=utf-8",
dataType: "json"
});
},

init: function() {
var _self = this;
$.when(_self.getAllData(serverMethodParamObject)).done(function (resp) {
if (data) {
data = {};
}

data = $.parseJSON(resp.d);

oTable = $('table.dataContainer').dataTable({
aaData: data, // the return data from the database
bFilter: true,
bInfo: false,
bPaginate: true,
sPaginationType: "full_numbers",
bJQueryUI: true,
//iDisplayLength: 25,
aoColumns: [
{
mDataProp: "SerialNumber",
fnRender: function (obj) {
return '' + obj.aData.SerialNumber + '';
},
bSortable: true
},
{
mDataProp: "Model",
bSortable: false
},
{
mDataProp: "Club",
bSortable: false
},
{
mDataProp: "Product",
bSortable: false
},
{
mDataProp: "ItemNumber",
bSortable: true
},
{
mDataProp: "AcctNumber",
bSortable: true
},
{
mDataProp: "OrderNumber",
bSortable: true,
fnRender: function (obj) {
return '' + obj.aData.OrderNumber + '';
}
}
]
});
}
[/code]

which works perfectly.

In stead of having the traditional approach, which is something like:

[code]
oTable = $("table.dataContainer").dataTable({
bFilter: true,
bInfo: false,
bPaginate: true,
sPaginationType: "full_numbers",
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
sAjaxSource: "/Services/SerialNumberLookupService.aspx/GetSerialWorkOrder",
fnServerData: function (sSource, aoData, fnCallback) {
aoData = serverMethodParamObject;
$.ajax({
type: "POST",
url: sSource,
data: aoData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: fnCallback
});
}
});
[/code]

where we have the fnserverData which I believe takes care of loading the data from the backend.

I went with the following approach, ( I'm new) :)

Now I wanted to reload the data at some point after doing some modifications,
by destroying the data table and redrawing it again, by calling the same init function.

so something like:

[code]
if ( oTable !== 'undefined) {
oTable.fnDestroy();
}

_self.init(); //reload the datatable
[/code]

It reloads with the new data the first time, the second time it gives me the following error:
Uncaught TypeError: Cannot read property 'nTableWrapper' of null jquery.datatables.js line 4606

So I took the other approach:
[code]
if ( oTable !== 'undefined) {
oTable.fnDestroy();
}

//_self.init();
oTable.fnReloadAjax(); // reload the datatable with new approach
[/code]

and I get the following error: http://localhost:61664/Common/null?_=1363277023750 404 (Not Found)
because in fnReloadAjax.js
[code]
oSettings.fnServerData.call(oSettings.oInstance, oSettings.sAjaxSource, aData, function (json) {
...
[/code]

oSettings.sAjaxSource is undefined, aData is undefined, and of course json is also undefined.

How can fix this issue while maintaining the approach I took, since I've already got more than 2000 lines of code, and changing the approach to accommodate this feature could be costly.

Thank you