Load new Data into Jquery DataTables -

i load data table 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 = '';              (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 fine, , renders nice looking table. now, i've added drop down list contains years (2009-2013), when users selects, calls out ashx page , retrieves records given year. i'm struggling do, send new data set existing table.

i've tried this:

 $('#archiveyears').change(function () {         var year = $("#archiveyears option:selected").text();          var senderbic = 'diaggb2lactb'         // need filter out table 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);                 (var = 0; < data.length; i++) {                     datatable.oapi._fnadddata(osettings, data[i]);                 }                 osettings.aidisplay = osettings.aidisplaymaster.slice();                 datatable.fndraw();             }       }); 

});

which complains osettings not being declared!

so, what's best way drop existing table content, , load new?

ok, following suggestion tried following :

success: function (data) {                   var datatable = $('#tblmsgdatedetail').datatable();                  datatable.fncleartable();                  datatable.fnadddata(data); 

which throws error dialog

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

short response !

demo (thx allan !)

bdeferrender: true can use

you can easy change adddata function in order add ajax call

update:

you should add settings datatable . think should begin read doc , see examples here

for error, should define columns , check sdefaultcontent.

example :

 $('#example').datatable( {     "aocolumndefs": [       {         "mdata": null,         "sdefaultcontent": "edit",         "atargets": [ 0 ]       }     ]   } );  

update 2

if load data server-side check example. datatable job you.

$(document).ready(function() {     $('#example').datatable( {         "bprocessing": true,         "bserverside": true,         "sajaxsource": "getjson.ashx"     } ); } ); 

if use dotnet (server-side) can check this

update 3

define column datatable if "data" result :

{  "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 increment server-side each new ajax call itotalrecords , itotaldisplayrecords should same , it's number of row here can set column :

$(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 property null, sdefaultcontent replace null value in order avoid error "unknown parameter 0"

in order work server-side, should : codeproject can learn how work requests , parameters.

for example when load page @ first time, datatable send :

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

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

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

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

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

and can imagine rest...

i can't ajax call ! it's example :

demo jsfiddle update 1

and recommend update 3 in situation !

i hope you. if it's good, can resolve post checking response. appreciate !