如何使用带有ajax的Data Table jQuery？

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

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]);

Answer 2

试试!!

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();

function setData（data）{

(function () {
  /* @ngInject */
  function MyPhoneDirective($filter) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link(scope, element, attributes, ngModel) {
        ngModel.$parsers.push((modelValue) => {
          modelValue = modelValue.replace(' ', '');
          ngModel.$modelValue = modelValue;

          return modelValue;
        });

        ngModel.$formatters.push((viewValue) => {
          console.log(viewValue); // gives undefined
          viewValue = $filter('phoneFormatter')(viewValue);
          ngModel.$viewValue = viewValue;

          return viewValue;
        });
      },
    };
  }

  angular
    .module('module.common')
    .directive('myPhone', MyPhoneDirective);
}());

}