Unable to load a Datatable on click of a button - datatables

Question

I am trying to load a datatable on click of a button outside the datatable.
below is my piece of code
$('#buttonToLoadDatatable').on('click', function() {
$.ajax({
type: "GET",
url:"../fhParser/fhParser/downloadAndParseResume/v1",
}).done(function (result) {
var table = $('#example').DataTable( {
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-
12 hidden-xs'l>r>"+
"t"+
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"oLanguage": {
"sSearch": '<span class="input-group-addon"><i
class="glyphicon glyphicon-search"></i></span>'
},
"bDestroy": true,
"data":result,
"iDisplayLength": 15,
/**this portion was because I have a collapsible rows**/
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data":"email" }
],
rowCallback: function (row, data) {},
filter: false,
info: false,
ordering: false,
processing: true,
retrieve: true,
"fnDrawCallback": function( oSettings ) {
runAllCharts()
}
// rowCallback: function (row, data) {}
} );
console.log( result );
}).fail(function (jqXHR, textStatus, errorThrown) {
});
});
When I print the value in the browser console, it comes correctly as
{"email": "triedandtest#gmail.com"}, but it does not display in the datatable
There is no error also in the console or at the backend

Answer 1

Can you replace your code to
$('#buttonToLoadDatatable').on('click', function() {
$.ajax({
type: "GET",
url:"../fhParser/fhParser/downloadAndParseResume/v1",
}).done(function (result) {
var table = $('#example').DataTable( {
"sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-
12 hidden-xs'l>r>"+
"t"+
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
"oLanguage": {
"sSearch": '<span class="input-group-addon"><i
class="glyphicon glyphicon-search"></i></span>'
},
"bDestroy": true,
"data":result.data,
"iDisplayLength": 15,
/**this portion was because I have a collapsible rows**/
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data":"email" }
],
rowCallback: function (row, data) {},
filter: false,
info: false,
ordering: false,
processing: true,
retrieve: true,
"fnDrawCallback": function( oSettings ) {
runAllCharts()
}
// rowCallback: function (row, data) {}
} );
console.log( result );
}).fail(function (jqXHR, textStatus, errorThrown) {
});
});
and check if that works
FYI changed "data":result, to "data":result.data,