Reload datatable data with ajax call on click

Question

I have a datatable with ajax calls. I form the table like this:

var _initTable = function() {
    $('#datatables tr').not(':first').on('click', function() {
        var dateandtime = $(this).find(':nth-child(3)').text();
        window.location.href = '/results/detail/dateandtime/' + dateandtime;
    });
};

$('#datatables').dataTable({
     bProcessing  : true,
     sProcessing  : true,
     bServerSide  : true,
     sAjaxSource  : '/results/load-results',
     fnServerParams: function ( aoData ) {
         aoData.push( {"name": "quizid", "value": quizid },{ "name": "questionid", "value": questionid } );
     },
     aoColumnDefs : [{'bSortable' : false, 'aTargets' : ['no-sort']}], // make the actions column unsortable
     sPaginationType : 'full_numbers',
     fnDrawCallback  : function(oSettings) {
         _initTable();
     }
});

As you can see I send 2 parameters to my php action.
Now I would like to reload the table when I click on a button. So what I want to do is make another ajax call and send other parameters (quizid will be the same, but the questionid will be different).

I know you have something like this oTable.fnReloadAjax(newUrl); but what should I paste at the newUrl parameter??

I've made a jsfiddle: http://jsfiddle.net/8TwS7/

Jay Rizzi · Accepted Answer · 2013-11-15 18:52:55Z

5

you should be able to accomplish this by using fnServerData instead of fnServerParams

var oTable = $('#datatables').dataTable({
     bProcessing  : true,
     sProcessing  : true,
     bServerSide  : true,
     sAjaxSource  : '/results/load-results',
"fnServerData": function ( sSource, aoData, fnCallback ) {
            /* Add some extra data to the sender */
            aoData.push( { "name": "quizid", "value": quizid } );
            aoData.push( { "name": "question_id", "value": question_id } );
            $.getJSON( sSource, aoData, function () { 
                /* Do whatever additional processing you want on the callback, then tell DataTables */              
            }).done(function(json){
                fnCallback(json);
                        }).fail(function(xhr, err){ 
                var responseTitle= $(xhr.responseText).filter('title').get(0);
                alert($(responseTitle).text() + "\n" + formatErrorMessage(xhr, err) ); 
            });
        },      
    });

you should be able to then call a click function to redraw your table no problem using the fnDraw API call on the variable we created on datatable initialization

$('#somelement').on('click', function(){

        oTable.fnDraw();
    });

answered Nov 15, 2013 at 18:52

Jay Rizzi

4,3046 gold badges45 silver badges73 bronze badges

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

6 Comments

nielsv Over a year ago

Then I just get this error: Uncaught TypeError: Cannot read property 'oFeatures' of null

Jay Rizzi Over a year ago

you will have to post your entire source via jsfiddle in order to troubleshoot that...something is out of whack and without looking at all your source code i would only be guessing

nielsv Over a year ago

Ok, I've made a jsfiddle. It doesn't work and the links aren't correctly but you can see how my code looks like ... jsfiddle.net/8TwS7

Jay Rizzi Over a year ago

take php out of the equation...what does "/results/load-results" return? I am guessing right now that the aaData is misformed, scroll down on this page to server response, it should match this format datatables.net/release-datatables/examples/server_side/…

nielsv Over a year ago

Nowp, it's correct and just the same as the original response (but different data ofcourse). Here's and updated topic of my problem: stackoverflow.com/questions/20005816/…

|

Collectives™ on Stack Overflow

Reload datatable data with ajax call on click

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related