turn a default datatable into server side rendering - laravel

Question

i am using datatables to load the companies table and it has +13K companies it takes so much time to load everything, i wanna turn it into server side but i am having so much trouble doing that :

datatable image

the datatable code :

<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>

i tried adding ajax but it just missed up my table :

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


            });

and i need the action section of the table to activate and deactivate the companies .

Answer 1

Check the following code:

$(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},
        ]
        });
    });

Hope this will be useful.