CODEWITHSUNDEEP
jqueryajaxdatatables
rahul pasricha
rahul pasricha

Reputation: 931

DataTables - custom AJAX request in fnServerData isn't working

I am initializing a dataTable and using ajax function to load the data. Server side is spring mvc + hibernate.

Following is the code to initialize the data table

$('.hist_data').on('click', function(){
    $('.myTable').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "bJQueryUI": true,
        "sAjaxSource": "/application-monitor/getTableData",
        "fnServerData" : function(sSource, aoData, fnCallback) {
            request = $.ajax({
                "dataType" : "json",
                "type" : "POST",
                "url" : sSource,
                "data" : aoData,
                "success" : fnCallback
            });
        },
        "aoColumns": [
            { "mData": "id" },
            { "mData": "name" },]
    } );

});

/application-monitor/getTableData returns a list of object (a java bean having an id and name which are my colums).

When i run this, i don't see any data in the page also i used firebug to debug it but do not see any issues in initializing.

Any help is appreciated.

Upvotes: 1

Views: 7517

Answers (2)

James Holderness
James Holderness

Reputation: 23001

Your code works fine for me as it is.

I created some basic markup like this:

<div class="hist_data">Click here</div>
<table class="myTable"></table>

And I made a test backend that returned json like this:

{"aaData": [
  {"id":"1","name":"One"},
  {"id":"2","name":"Two"}
]}

Combined with the javascript you provided, and some links to the jquery and dataTables scripts, that was all I had to do to make it work.

I suspect the problem is in your backend code. In particular, note that you should be returning an object with an aaData field containing the array of items. You can't just return the array by itself.

Upvotes: 2

WooCaSh
WooCaSh

Reputation: 5212

I'm not sure but first of all you need check in firebug or devtools is data is correctly fetched. If yes then maybe your code is wrong. I copy this from documentation:

"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
    oSettings.jqXHR = $.ajax( {
        "dataType": 'json', 
        "type": "POST", 
        "url": sSource, 
        "data": aoData, 
        "success": fnCallback
   });
},//....

I don't know what is request in your code but try this code above to be sure.

Upvotes: 1

Related Questions