put functional buttons for editing in serverside datatable - Laravel - laravel

Question

The project is in Laravel. I have to pull a lot of records, so I opted for serverside... but, I can't put functional buttons to edit the records
index.blade
#extends('layouts.app')
#section('content')
<section class="section">
<div class="section-header">
<h3 class="page__heading">Siniestros</h3>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">Dashboard</li>
<li class="breadcrumb-item">Siniestros</li>
<!-- <li class="breadcrumb-item active" aria-current="page">Index</li> -->
</ol>
</nav>
<div class="section-body">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
#can('crear-siniestro')
<a class="btn btn-primary btn-sm" href="{{ route('siniestros.create') }}">Nuevo</a>
#endcan
<table class="table table-sm m-1 p-1 table-bordered table-hover table-striped tablita" style="width:100%">
<thead style="background-color:hsl(213, 99%, 49%)">
<th style="color:#fff;">Siniestro</th>
<th style="color:#fff;">Fecha IP</th>
<th style="color:#fff;">Nro Corto</th>
<th style="color:#fff;">Dirección</th>
<th style="color:#fff;">Localidad</th>
<th style="color:#fff;">Patente</th>
<th style="color:#fff;">Fecha IP</th>
<th style="color:#fff;">Estado</th>
<th style="color:#fff;">Coordinador</th>
<th style="color:#fff;">Fecha ingreso</th>
<th style="color:#fff;">Fecha gestión</th>
<th style="color:#fff;">Modalidad</th>
<th style="color:#fff;">Cliente</th>
<th style="color:#fff;">Dirección</th>
<th style="color:#fff;">Localidad</th>
<th style="color:#fff;">Inspector</th>
<th style="color:#fff;">Motivo</th>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
#endsection
<!-- DataTables JS -->
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-html5-2.2.2/b-print-2.2.2/r-2.2.9/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js" integrity="sha512-6PM0qYu5KExuNcKt5bURAoT6KCThUmHRewN3zUFNaoI6Di7XJPTMoT6K0nsagZKk2OB4L7E3q1uQKHNHd4stIQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
#section('javas')
<script>
$(document).ready(function() {
$('.tablita').DataTable({
ajax: 'datatable/users',
processing: true,
serverSide: true,
pageLength: 100,
columns: [
{"data": "siniestro"},
{"data": "fechaip"},
{"data": "nrocorto"},
{"data": "direccion"},
{"data": "localidad"},
{"data": "patente"},
{"data": "fechaip"},
{"data": "estado"},
{"data": "coordinador"},
{"data": "created_at"},
{"data": "updated_at"},
{"data": "modalidad"},
{"data": "cliente"},
{"data": "direccion"},
{"data": "localidad"},
{"data": "inspector"},
{"data": "motivo"},
]
});
});
function editData(id){
$.ajax({
type:"get",
dataType:"json",
url:"/teacher/edit/"+id,
success: function(data){
$('#id').val(data.id);
console.log(data);
}
})
}
</script>
#endsection
SiniestroController
public function registros(){
$registros = Siniestro::all();
return Datatables::of($registros)->toJson();
return $registros;
}
web.php
Route::get('datatable/users', [SiniestroController::class, 'registros']);
In other views I have the button that I will leave next, to edit each record, which takes me to a blade view. I would like to be able to agree with this one if possible:
<a class="btn btn-outline-success btn-lg" href="{{ route('siniestros.edit',$siniestro->id) }}"><i class="fa-solid fa-pen-to-square fa-xl"></i></a>