Reloading Datatables

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.

 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 '<a id="serialNumber" href="#">' + obj.aData.SerialNumber + '</a>';
                                    },
                                    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 '<a id="order" href="#">' + obj.aData.OrderNumber + '</a>';
                                    }
                                }
                            ]
                });
    }

which works perfectly.

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

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
                        });
                    }
                });

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:

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

_self.init(); //reload the datatable

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:

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

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

and I get the following error: http://localhost:61664/Common/null?_=1363277023750 404 (Not Found)
because in fnReloadAjax.js

 oSettings.fnServerData.call(oSettings.oInstance, oSettings.sAjaxSource, aData, function (json) {
...

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