CODEWITHSUNDEEP
javascriptjqueryajaxdatatables
John Beasley
John Beasley

Reputation: 3075

Cannot load data table with JSON

I am trying to load JSON into a jQuery data table.

When firing the change event, using the below method, I can return to the console the exact same data I need to load in the data table:

 $('#serviceload').change(function()
 {
   var page = $('#serviceload').val();

   $.ajax({
     "type": 'POST',
     "url": 'api/service_teus.php',
     "data": {page:page},
     //"dataType": 'json',
     "success": function(data){
        console.log('success', data);
     },
     "error": function(msg){
        console.log('fail', msg);
     }
   });
 });

Now when I change the code above to include the data table, this is where I'm stuck:

 $('#serviceload').change(function()
 {
   var page = $('#serviceload').val();

   var $dataTable = $('#example1').DataTable({
     "ajax":{
       "url": 'api/service_teus.php',
       "data": {page:page},
       "dataType": 'json',
       "success": function(data){
         console.log('success', data);
        },
       "error": function(msg){
         console.log('fail', msg);
        }
      }
 });

Using the above method, the console returns an array of objects, but doesn't load the data table.

Answering this question will actually help me answer another question I posted.

Upvotes: 1

Views: 875

Answers (2)

John Beasley
John Beasley

Reputation: 3075

I used my answer from this page: Load JQUERY DATATABLE on CHANGE event

And I was able to finally move on.

Upvotes: 0

Alden Be
Alden Be

Reputation: 517

Your dataTable is likely being generated with the ajax promise and not the returned data. Generate the datatable inside your success function instead of using the entire ajax statement.

Something like this.

$('#serviceload').change(function()
 {
   var page = $('#serviceload').val();

   $.ajax({
     "type": 'POST',
     "url": 'api/service_teus.php',
     "data": {page:page},
     "dataType": 'json',
     "success": function(data){
        console.log('success', data);
        $dataTable = $('#example1').DataTable(data);
     },
     "error": function(msg){
        console.log('fail', msg);
     }
   });
 });

Upvotes: 3

Related Questions