Load new Data into Jquery DataTables

Question

I load data into my table as follows:

 $(document).ready(function () {

     var variable= 'sometext'

     $.ajax({
         type: "POST",
         url: "GetJSON.ashx",
         cache: false,
         data: { param: variable},
         dataType: "json",
         success: function (data) {

             var html = '';
             for (var key = 0, size = data.length; key < size; key++) {
                 html += '<tr><td>' + data[key].SessionID + '</td><td>'
                 + data[key].val1+ '</td><td>'
                 + data[key].val2+ '</td><td>'
                 + data[key].val3+ '</td><td>'
                 + data[key].val4+ '</td><td>'
                 + data[key].val5+ '</td><td>'
                 + data[key].Status + '</td></tr>'
             }
             $('#table).append(html);

             otableName = $('#table).dataTable({
                 //"bDestroy": true,
                 "bPaginate": true,
                 "sPaginationType": "bootstrap",
                 "iDisplayLength": 20,
                 "sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
                 "oTableTools": {
                     "sSwfPath": "media/swf/copy_csv_xls_pdf.swf",
                     "aButtons": [
                     "copy",
                     "print",
                     {
                         "sExtends": "collection",
                         "sButtonText": 'Save <span class="caret" />',
                         "aButtons": ["csv", "xls", "pdf"]
                     }
                     ]
                 }
             })

         },
         error: function (xhr, status, error) {
             var err = eval("(" + xhr.responseText + ")");

             alert(err.Message);

         }
     });
 });

this works perfectly fine, and renders a nice looking table. Now, i've added a drop down list which contains years (2009-2013), which when an users selects, calls out to another ashx page and retrieves all the records for a given year. What i'm struggling to do, is to send this new data set to the existing table.

I've tried this:

 $('#ArchiveYears').change(function () {
        var year = $("#ArchiveYears option:selected").text();

        var senderBIC = 'DIAGGB2LACTB'
        // Need to filter out the table with the year
        $.ajax({
            type: "POST",
            url: "GetJSONYearly.ashx",
            cache: false,
            data: { param: value, year: year },
            dataType: "json",
            success: function (data) {
                var dataTable = $('#table').dataTable();
                dataTable.fnClearTable(this);
                for (var i = 0; i < data.length; i++) {
                    dataTable.oApi._fnAddData(oSettings, data[i]);
                }
                oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
                dataTable.fnDraw();
            }
      });

});

which complains about oSettings not being declared!

So, what's the best way to drop existing table content, and load it with new?

Ok, so following your suggestion I tried the following :

success: function (data) {


                var dataTable = $('#tblMsgDateDetail').dataTable();

                dataTable.fnClearTable();

                dataTable.fnAddData(data);

which throws this error dialog

oddly though the table redraws and display the correct amount of records, just no data.

Answer 1

Short response !

Demo (Thx Allan !)

bDeferRender: true can be use

you can easy change my addData function in order to add your ajax call

UPDATE:

you should add some settings with your datatable . I think that you should begin to read the doc and see some examples here

For this error, you should define your columns and check sDefaultContent.

Example :

 $('#example').dataTable( {
    "aoColumnDefs": [
      {
        "mData": null,
        "sDefaultContent": "Edit",
        "aTargets": [ 0 ]
      }
    ]
  } ); 

UPDATE 2

if you load data server-side check this example. datatable does the job for you.

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "GetJSON.ashx"
    } );
} );

if you use dotnet (server-side) you can check this

UPDATE 3

Define your column into datatable so if your "data" result is something like :

{ 
"sEcho":1, 
"iTotalRecords":"57", 
"iTotalDisplayRecords":"57", 
"aaData":[ 
{ 
"MsgRef":"JF5465446", 
"Sender":456545645445, 
"Receiver":"Win 98+ / OSX.2+", 
"MsgDate":"2010/02/23", 
"MsgType":"SUCCESS", 
"Currency":"$", 
"Amount":"120.02", 
"B1":"John1", 
"B2":"John2", 
"B3":"John3", 
"B4":"John4", 
"Status":"A" 
} 
] 
}

note sEcho must be increment server-side for each new ajax call iTotalRecords and iTotalDisplayRecords should be the same for you and it's number of row here you can set your column like this :

$(document).ready(function() { 
$('#example').dataTable( { 
"bProcessing": true, 
"bServerSide": true, 
"sAjaxSource": "GetJSON.ashx", 
"aoColumns": [ 
{ 
"bSortable": false, 
"bSearchable": false, 
"mData": "MsgRef", 
"sDefaultContent": "-" 
}, 
{ 
"bSortable": false, 
"bSearchable": false, 
"mData": "Sender", 
"sDefaultContent": "-" 
} 
//[...] etc 
] 
} ); 
} );

like this, if a property is null, sDefaultContent replace the null value in order to avoid your error "unknown parameter 0"

in order to work server-side, you should look : codeproject you can learn how to work with requests and parameters.

for example when you load your page at the first time, datatable send to you :

sEcho=1&start=0&size=10[...]

when user'll click on next page. datatable send to you :

sEcho=2&start=10&size=10[...].

when user'll click on next page. datatable send to you :

sEcho=3&start=20&size=10[...]

and you can imagine the rest...

i can't do ajax call for you ! So it's an example :

DEMO JsFiddle for UPDATE 1

and i strongly recommend to do UPDATE 3 in your situation !

I hope that it help to you. if it's good, you can resolve your post by checking my response. i will appreciate that !