Reload datatable data with ajax call on click
19,129
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();
});
Author by
nielsv
Updated on June 05, 2022Comments
-
nielsv almost 2 years
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/
-
nielsv over 10 yearsThen I just get this error: Uncaught TypeError: Cannot read property 'oFeatures' of null
-
Jay Rizzi over 10 yearsyou 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 10 yearsOk, 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 10 yearstake 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 10 yearsNowp, 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/…
-
Jay Rizzi over 10 yearsyoure not understanding what i'm saying...the jsfiddle you created is not useful as there are too many server-side declarations that are not included in the jsfiddle...for instance <?php echo json_encode($quizid); ?> is never declared in any of your source thats provided, is that just a get variable?. I have no problem attempting to troubleshoot this problem, but you are going to have to decouple the php logic and provide a static data array that you are expecting when /loadresults/ is called, that way it can be diagnosed...does that make sense?