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

Posted 2023-03-14

【中文标题】在 Laravel 中调用 ajax 后数据表无法正常工作

【英文标题】：Datatable is not working after ajax call in Laravel

【发布时间】：2021-04-27 03:13:21

【问题描述】：

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

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

【问题讨论】：

使用 Datatable 的内置 AJAX 功能，而不是手动附加您自己的功能。这样，它将为您处理搜索/分页/排序，而无需您手动进行。

【参考方案1】：

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