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 += '' + data[key].SessionID + '' + data[key].val1+ '' + data[key].val2+ '' + data[key].val3+ '' + data[key].val4+ '' + data[key].val5+ '' + data[key].Status + '' } $('#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 ', "aButtons": ["csv", "xls", "pdf"] } ] } }) }, error: f…

Accepted Answer

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 !

Load new Data into Jquery DataTables

Solution

Problem