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

after addData

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

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 !

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 10, 2013 at 20:51

Olivier Albertini

7142 gold badges7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

CSharpNewBee Over a year ago

Hi Olivier, thanks for the demo/short response. this is fantastic. One point, instead of adding additional items, can the original ones be replaced with the new?

Olivier Albertini Over a year ago

yes, you can use oTable.fnClearTable(); before add the new. All is here : datatables.net/ref

CSharpNewBee Over a year ago

Hi Olivier, appreciate the response. I already have this.. I create the dataTable with all the necessary details on page load. Then, the user select a drop down, which contains a list of years. On change event, this go out to a ashx page and retrieves the new data set based on the year selected. All i'm after at this point is to empty the existing table and replace the data with the new dataset. Are you saying, that I need to configure and set up all the table definitions again? To be fare, the documentation isn't that clear, for someone new to this game :-)

CSharpNewBee Over a year ago

this is all in c# - most of the reference are in php, very little in any other language

Olivier Albertini Over a year ago

check my last link :)

|

Collectives™ on Stack Overflow

Load new Data into Jquery DataTables

1 Answer 1

UPDATE:

UPDATE 2

UPDATE 3

DEMO JsFiddle for UPDATE 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE:

UPDATE 2

UPDATE 3

DEMO JsFiddle for UPDATE 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related