javascript - 如何将数据表 jQuery 与 ajax 结合使用？

Question

我真的需要你的帮助。我是 jQuery DataTable 的新手。我正在做的是，我有一个 url(后端 laravel php)，它返回一个 JSON 响应，如下所示:

[
{"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}
]

我目前正在做的是使用ajax jquery 获取数据，并将其动态添加到表中。像这样:

  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");
}
  });

它有效。但是当我使用数据表的排序和搜索功能时，屏幕上显示的数据消失了。浏览后发现我无法将其应用到这样的表中。我必须使用 DataTable 的函数来检索 json。我需要帮助。我看过一些文档，但未能使其正常工作。非常感谢您的帮助!!

我尝试过但失败的数据表语法:

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

    ]

  });

这是我试图用 DataTable 实现的格式:

Answer 1

docs使用此语法:

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

Edit

<小时/>

您需要修改您的响应，使其成为如下所示的对象:

{

"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

<小时/>

您可以通过修改您的响应来实现这一点，如下所示:

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