将默认数据表转换为服务器端渲染 - laravel

Question

我正在使用数据表来加载公司表，它有超过 13000 家公司需要花费大量时间来加载所有内容，我想把它变成服务器端，但我在这样做时遇到了很多麻烦：

datatable image

数据表代码：

<div class="panel-body">
    <table id="datatable" class="table table-striped table-bordered" style="width:100%">
<thead>
    <tr>
        <th>id</th>
        <th>RS</th>
        <th>Secteur</th>
        <th>Telephone</th>
        <th>Action</th>
    </tr>
</thead>
<tbody>
   @foreach($resultas as $resultat)
   <tr>
       <td style=" display:flex">
           <div><a  href="{{ route('CP_edit',['id'=> $resultat->id]) }}"><button  style="background-color:#584F6C" type="button"  class="btn btn-secondary btn-sm"> Modifier</button></a></div>
           <div>
               @if( $resultat->active == 0 )
           <a onclick="activate(this)" data-id="{{$resultat->id}}"><button   style="background-color:#3CB371 ;  margin-left:20px;" id="activation" name="activation" value="{{ $resultat->active }}" type="button"  class="btn btn-secondary btn-sm"> Activate</button></a>
               @else
               <a onclick="activate(this)" data-id="{{$resultat->id}}"> <button  style="background-color:#B22222 ;  margin-left:20px;" id="activation" name="activation" value="{{ $resultat->active }}" type="button"  class="btn btn-secondary btn-sm"> Deactivate</button></a>
               @endif
           </div>
        </td>
   </tr>
   @endforeach
</tbody>

我尝试添加 ajax，但它只是错过了我的表：

$(document).ready( function () {
$('#datatable').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "{{ route('CP') }}",
            "columns": [
                { "data": "id" },
                { "data": "RS" },
                { "data": "secteur" },
                { "data": "Tel1" }
            ]
});


            });

我需要表格的操作部分来激活和停用公司。

Answer 1

检查以下代码：

$(document).ready(function(){
        $('#datatable').DataTable({
        "searching": false,
        "bLengthChange": false,
        "processing": true,
        "order": [[0,"asc"]], 
        "serverSide": true,
        "ajax" : '{{route("CP")}}',
        "rowCallback" : function(row, data, index)
        {
            
            var htmlStr = '<td>'+data['id']+'</td><td>'+data['RS']+'</td><td>'+data['secteur']+'</td><td>'+data['Tel1']+'</td>';

            $(row).html(htmlStr);
        },
        "columns": [
            {title: "ID", data: "id"},
            {title: "RS", data: "RS"},
            {title: "secteur", data: "secteur"},
            {title: "Tel1", data: "Tel1},
        ]
        });
    });

希望这会有用。