在 Laravel 中调用 ajax 后数据表无法正常工作

Question

DataTable 无法正常工作。数据显示在表格上，但搜索、分页不起作用。我使用ajax请求来获取数据。

这是我的控制器代码

 $products = FoodItemPrice::with('items')->get();

        if ($request->ajax()) {
            return response()->json($products);
        }

这是我的 ajax 调用

function getData(){

 
 $.ajax({

        url: "{{url('admin/category/')}}",
        method:"GET",
        contentType:false,
        cache: false,
        processData:false,
        dataType:"json",

        success: function(response){
              var data = ""
              var i = 1;
              $.each(response, function(key, value){
                data = data + "<tr>"
                data = data + "<td>"+i+++"</td>"
                data = data + "<td>"+value.name+"</td>"
                data = data + "<td class='actionBtn'>"
                data = data + "<button type='button' class='ms-btn-icon btn-dark mr-3' onclick='editCategory("+value.id+")'> <i class='flaticon-pencil'></i></button>"
                data = data + "<button type='button'class='ms-btn-icon btn-danger'  onclick='deleteData("+value.id+")'> <i class='flaticon-trash'></i></button>"
                data = data + "</td>"
                data = data + "</tr>"
              });
               $('tbody').html(data);
        
          }
  });
}  
getData();

Here is dataTable scripts 


    $(document).ready(function() 
    {
        $('#dataTable').DataTable();
    } );

问题出在哪里？谁能告诉我怎么解决？

Answer 1

我推荐你使用 Laravel Yajra Datatable 并使用内置的 Datatable 服务器端数据加载 https://github.com/yajra/laravel-datatables