Is that possible to invoke a javascript function in success of datatable ajax call. Here is the code am trying to use,
var oTable = $('#app-config').dataTable(
{
"bAutoWidth": false,
"bDestroy":true,
"bProcessing" : true,
"bServerSide" : true,
"sPaginationType" : "full_numbers",
"sAjaxSource" : url,
"fnServerData" : function(sSource, aoData, fnCallback) {
alert("sSource"+ sSource);
alert("aoData"+ aoData);
$.ajax({
"dataType" : 'json',
"type" : "GET",
"url" : sSource,
"data" : aoData,
"success" : fnCallback
});
}
is it possible to have something like,
success : function(){
//.....code goes here
}
instead of "success" : fnCallback ------> which is last line of AJAX call. In this function I would like to check a value send from server side. Thanks in advance for any help....
This question is related to
javascript
jquery
ajax
datatables
You can use dataSrc :
Here is a typical example of datatables.net
var table = $('#example').DataTable( {
"ajax": {
"type" : "GET",
"url" : "ajax.php",
"dataSrc": function ( json ) {
//Make your callback here.
alert("Done!");
return json.data;
}
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
This works fine for me. Another way don't work good
'ajax': {
complete: function (data) {
console.log(data['responseJSON']);
},
'url': 'xxx.php',
},
Try Following Code.
var oTable = $('#app-config').dataTable(
{
"bAutoWidth": false,
"bDestroy":true,
"bProcessing" : true,
"bServerSide" : true,
"sPaginationType" : "full_numbers",
"sAjaxSource" : url,
"fnServerData" : function(sSource, aoData, fnCallback) {
alert("sSource"+ sSource);
alert("aoData"+ aoData);
$.ajax({
"dataType" : 'json',
"type" : "GET",
"url" : sSource,
"data" : aoData,
"success" : fnCallback
}).success( function(){ alert("This Function will execute after data table loaded"); });
}
For datatables 1.10.12.
$('#table_id').dataTable({
ajax: function (data, callback, settings) {
$.ajax({
url: '/your/url',
type: 'POST',
data: data,
success:function(data){
callback(data);
// Do whatever you want.
}
});
}
});
Based on the docs, xhr
Ajax event would fire when an Ajax request is completed. So you can do something like this:
let data_table = $('#example-table').dataTable({
ajax: "data.json"
});
data_table.on('xhr.dt', function ( e, settings, json, xhr ) {
// Do some staff here...
$('#status').html( json.status );
} )
You can use this:
"drawCallback": function(settings) {
console.log(settings.json);
//do whatever
},
The best way I have found is to use the initComplete method as it fires after the data has been retrieved and renders the table. NOTE this only fires once though.
$("#tableOfData").DataTable({
"pageLength": 50,
"ajax":{
url: someurl,
dataType : "json",
type: "post",
"data": {data to be sent}
},
"initComplete":function( settings, json){
console.log(json);
// call your function here
}
});
"success" : function(data){
//do stuff here
fnCallback(data);
}
Maybe it's not exactly what you want to do, but using the ajax complete solved my problem of hiding a spinner when the ajax call returned.
So it would look something like this
var table = $('#example').DataTable( {
"ajax": {
"type" : "GET",
"url" : "ajax.php",
"dataSrc": "",
"success": function () {
alert("Done!");
}
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
The success option of ajax should not be altered because DataTables uses it internally to execute the table draw when the data load is complete. The recommendation is used "dataSrc" to alter the received data.
Source: Stackoverflow.com