How to use with Data Table jQuery with ajax?

Question

I really need your help here. I am new with jQuery DataTable. What I am doing is, I have a url (backend laravel php) that returns a JSON response like so:

[
{"kode_pt":1,"nama":"title","SK_path":"\/folder","email_PJ":"\/images","validasi":0},
{"kode_pt":2,"nama":"title","SK_path":"\/folder","email_PJ":"\/images","validasi":0}
]

What I am doing currently is using ajax jquery to GET the data, and add it to the table dynamically. Like this:

  var content="";
  $.ajax({
    url: '{{route('get.pt')}}',
    method: "GET",
    dataType: "json",
    success: function(data){
      for(i=0; i<data.length; i++){
        content+='<tr>'+
          '<td>'+data[i].kode_pt+'</td>'+
          '<td>'+data[i].nama+'</td>'+
          '<td>'+data[i].validasi+'</td>'
          +'<td><button id="accept" data-id='+data[i].kode_pt+' class="btn btn-success">Accept</button><button data-id='+data[i].kode_pt+' class="btn btn-danger">Decline</button><button id="view" data-id='+data[i].kode_pt+' class="btn btn-info">View</button></td>';
      }

  $("#verify-pt-body").html(content);
},
error: function(){
  console.log("Ajax Error - getPT");
}
  });

It works. But when I use the sort and search functionality of data table, the data shown onscreen disappears. After browsing, it turns out I cannot apply it to the table like that. I have to use the DataTable's functions to retrieve the json. I need help with that please. I have looked at few documentations but I have failed to get it working. Help would be much appreciated!!

Syntax of data tables I tried but failed:

$('#dataTable-verify-pt').DataTable({
    responsive: true,
    ajax:{
      url: '{{route('get.pt')}}'
    },
    columns:[
      {data: "kode_pt"},
      {data: "nama"},
      {data: "validasi"},

    ]

  });

This is the format I'm trying to achieve with DataTable:

Sometimes it was undefined c or undefined f, and it was from the jquery.min.js... But I have problems with the syntax to retrieve the ajax and putt it in the datatables. Thats why I ask :) — Adis Azhar
– Adis Azhar, Commented Apr 18, 2018 at 17:37

Amr Aly · Accepted Answer · 2018-04-18 19:40:14Z

2

the docs uses this syntax:

$('#dataTable-verify-pt').DataTable({
    responsive: true,
    ajax: "{{route('get.pt')}}",
    columns:[
      {data: "kode_pt"},
      {data: "nama"},
      {data: "validasi"},
    ]
  });

Edit

you need to modify you response so it's an object like so:

{

"data": [
{"kode_pt":1,"nama":"title","SK_path":"\/folder","email_PJ":"\/images","validasi":0},
{"kode_pt":2,"nama":"title","SK_path":"\/folder","email_PJ":"\/images","validasi":0}
]

}

Edit 2

You can achieve so by modifying your response like so:

return response()->json(['data' => $data]);

edited Apr 18, 2018 at 19:40

answered Apr 18, 2018 at 17:46

Amr Aly

3,9152 gold badges18 silver badges36 bronze badges

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

4 Comments

Adis Azhar Over a year ago

Sorry it gave me, TypeError: f is undefined[Learn More]

Adis Azhar Over a year ago

I had that thought thank you. How would I able to modify it? From server side or client? Thank you.

Adis Azhar Over a year ago

Alhamdulillah brother. It's working. Sorry for the late response. Many thanks.

Amr Aly Over a year ago

Always here to help you bro:)

Abhijeet Kale · Accepted Answer · 2018-04-19 09:50:54Z

try it !!

var queryData = {

    //yourinput parameter
}

$.ajax({
        type : "GET",
        url : "your url",
        data : queryData,
        timeout : 100000,
        success : function(data) {
            console.log("SUCCESS: ", data);
            setData(data);  //call function & pass your JSON data to it.
        },
        error : function(e) {
            console.log("ERROR: ", e);
            display(e);
        },
        done : function(e) {
            console.log("DONE");
        }
    });

function setData(data) {

var salearr = JSON.parse(JSON.stringify(data)); //parse JSON data.

//create datatable dynamically on the fly 

var tableStr = ' ';
tableStr += "<table id=mydatatable class=mydatatable border=\"1\"  class=\"display\" style='border-collapse: collapse; border-spacing: 0;background:#FFFFFF'>"+

//your table header appears here

//access JSON parsed data using for loop
 for(var k=0; k<salearr.length; k++) {

        //your code with dynamic html

 }

 and finally  apply dataTable to it!!
  $("#mydatatable").dataTable();

}

Collectives™ on Stack Overflow

How to use with Data Table jQuery with ajax?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related