datatable is not working properly with my ajax code - json

Question

I had a Crud, in which I obtained the data of each record to be able to edit them, through a button("Asignar") with an event. In order to add a search bar I wanted to implement the DataTable plugin, but this, when importing my button, causes a conflict with the code; I would like to know what I must modify so that the button is operative with the DataTatable plugin.
DataTable Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Siniestro;
class DataTableController extends Controller
{
public function paraderivar(Request $request)
{
$siniestros = Siniestro::select('id', 'siniestro','fechaip', 'modalidad','direccion','localidad', 'inspector')->get();
return datatables()->of($siniestros)
->addColumn('edit', '<button class="btn btn-info btn-sm" onclick="editData(value.id)"> Asignar </button>')
->rawColumns(['edit'])
->toJson();
}
}
blade.view
#extends('layouts.app')
#section('content')
<section class="section">
<div class="section-header">
<h3 class="page__heading">Derivar IP</h3>
</div>
<div class="section-body">
<div class="row">
<div class="col-sm-9">
<div class="card">
<div class="card-header">
<h4>Siniestros para derivar</h4>
</div>
<div class="card-body">
<table class="table table-sm m-1 p-1 table-bordered table-hover table-striped tablita" style="width:100%">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Siniestro</th>
<th scope="col">Fecha IP</th>
<th scope="col">Modalidad</th>
<th scope="col">Dirección</th>
<th scope="col">Localidad</th>
<th scope="col">Inspector</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-sm-3" style="position:fixed; bottom:250px; right:0px">
<div class="card">
<div class="card-header">
<span id="addT">Asignar IP</span>
<span id="updateT">Asignar IP</span>
</div>
<div class="card-body">
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="form-group">
<label for="siniestro">Siniestro</label>
<input type="text" name="siniestro" id="siniestro" class="form-control">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<label for="inspector">inspector</label>
<select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="inspector"´for="inspector" name="inspector"">
#foreach ($users as $user)
<option value="{{ $user->id }}">{{ $user->name }}</option>
#endforeach
</select>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="form-group">
<label for="patente">Patente</label>
<input type="text" name="patente" id="patente" class="form-control">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="form-group">
<label for="fechaip">Fecha IP</label>
<input type="date" name="fechaip" id="fechaip" class="form-control">
</div>
</div>
<input type="hidden" id="id">
<!-- <button type="button" href="#" data-target="#ModalEnviar" class="btn btn-primary m-2" data-toggle="modal">Enviar IP</button> -->
<button type="submit" id="updateButton" class="btn btn-primary btn-sm" onclick="enviarData(event)">Notificar</button>
<button type="submit" id="updateButton" class="btn btn-primary btn-sm" onclick="updateData(event)">Update</button>
</div>
</div>
</div>
</div>
</div>
</section>
#endsection
#section('javas')
<script>
$('.tablita').DataTable({
"processing": "true",
"serverSide": "true",
"ajax": "{{route('datatable.paraderivar')}}",
"select": "true",
"columns":[
{data: 'id'},
{data: 'siniestro'},
{data: 'fechaip'},
{data: 'modalidad'},
{data: 'direccion'},
{data: 'localidad'},
{data: 'inspector'},
{data: 'edit'},
]
});
</script>
<script>
$('#addT').hide();
$('#addButton').hide();
$('#updateT').show();
$('#updateButton').show();
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
})
//---------------------------------------------- Llamar datos de la BD ---------------------------------------------------------------
function allData(){
$.ajax({
type: "GET",
dataType: "json",
url: "/teacher/all",
success: function (response){
var data = ""
$.each(response, function(key, value){
data = data + "<tr>"
data = data + "<td>"+value.id+"</td>"
data = data + "<td>"+value.siniestro+"</td>"
data = data + "<td>"+value.fechaip+"</td>"
data = data + "<td>"+value.modalidad+"</td>"
data = data + "<td>"+value.direccion+"</td>"
data = data + "<td>"+value.localidad+"</td>"
data = data + "<td>"+value.inspector+"</td>"
data = data + "<td>"
data = data + "<button class='btn btn-info btn-sm' onclick='editData("+value.id+")'>Asignar</button>"
data = data + "</td>"
data = data + "</tr>"
})
$('tbody').html(data);
}
})
}
// --------------------------------------------- fin de llamar datos de la DB ----------------------------------------------------------
allData();
// --------------------------------------------- Limpiar los campos despues del submit -------------------------------------------------
function clearData(){
$('#siniestro').val('');
$('#fechaip').val('');
$('#inspector').val('');
$('#nameError').text('');
$('#titleError').text('');
$('#instituteError').text('');
}
// --------------------------------------------- fin de limpiar los campos despues del submit -------------------------------------------------
// --------------------------------------------- Agregar registros a la table de BD -------------------------------------------------
function addData(){
var siniestro = $('#siniestro').val();
var fechaip = $('#fechaip').val();
var inspector = $('#inspector').val();
var patente = $('#patente').val();
$.ajax({
type: "POST",
dataType: "Json",
data: {siniestro:siniestro, fechaip:fechaip, inspector:inspector, patente:patente},
url:"/teacher/store/",
success: function(data){
allData();
clearData();
console.log('datos agregados con éxito');
},
error: function(error){
$('#nameError').text(error.responseJSON.errors.name);
$('#titleError').text(error.responseJSON.errors.title);
$('#instituteError').text(error.responseJSON.errors.institute);
}
})
}
// --------------------------------------------- fin de agregar registros a la table de BD -------------------------------------------------
// --------------------------------------------- Editar registros a la table de BD ---------------------------------------------------------
function editData(id){
$.ajax({
type:"get",
dataType:"json",
url:"/teacher/edit/"+id,
success: function(data){
$('#addT').hide();
$('#addButton').hide();
$('#updateT').show();
$('#updateButton').show();
$('#id').val(data.id);
$('#siniestro').val(data.siniestro);
$('#fechaip').val(data.fechaip);
$('#inspector').val(data.inspector);
$('#patente').val(data.patente);
console.log(data);
}
})
}
// --------------------------------------------- Fin de editar registros a la table de BD -------------------------------------------------
// --------------------------------------------- Update de registros a la table de BD -----------------------------------------------------
function updateData(event){
event.preventDefault();
var id = $('#id').val();
var siniestro = $('#siniestro').val();
var fechaip = $('#fechaip').val();
var inspector = $('#inspector').val();
var patente = $('#patente').val();
$.ajaxSetup({
headers:{
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
})
$.ajax({
type: "PUT",
dataType: "json",
data: {inspector:inspector, siniestro:siniestro, fechaip:fechaip, patente:patente},
url: "/teacher/update/"+id,
success: function(response){
allData();
clearData();
console.log('Siniestro asignado con éxito');
}
})
}
</script>
#endsection
When the page is reloaded, it seems that the DataTable plugin does not load correctly, since it does not page by 10, but loads all the records and the table becomes large... although I can click on the "assign" button and retrieve the attributes of each record. But, when I search for something in the search bar, the plugin pages 10 records, and when I click on each "Assign" button, it no longer sends me the data, but instead gives me the error "Failed to load resource: the server responded with a status of 404 (Not Found)." When I look at the error detail, it tells me the following: "{message: "No query results for model [App\Models\Siniestro] undefined",…}"