I am trying to fill an HTML table through a datatable which brings information from a database. Within the ajax parameters to bring the information from the database there is a piece of information that allows me to only extract the records of that parameter, but when I execute it by clicking a search button I get an error where it says that the parameter is null , but the parameter is the selected value in a combo that I fill when loading the page. This is the code that was initially made by the table and later by the script.
What I have tried:
<div class="card">
<div class="card-body">
<h5 for="txtLista" class="form-label">Integrantes</h5>
<table id="tabla" class="display cell-border" style="width: 100%">
<thead>
<tr>
<th>Nombre</th>
<th>Fecha nacimiento</th>
<th>Edad</th>
<th>Sexo</th>
<th>Tipo documento</th>
<th>Numero documento</th>
<th>Editar/Eliminar</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
@section scripts{
<script>
var tabladata;
var filaseleccionada;
$(document).ready(function () {
$("<option>").attr({ "value": "0", "disabled": "disabled", "selected": "true" }).text("Seleccionar").appendTo("#cbbunidad");
jQuery.ajax({
url: "@Url.Action("ListarUnidad", "Mantenedor")",
type: "GET",
datatype: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.data != null) {
$.each(data.data, function (index, item) {
$("<option>").attr({"value":item.uniId}).text(item.uniNombre).appendTo("#cbbunidad");
})
}
},
error: function (error) {
console.log(error)
}
});
})
$("#btnBuscar").on("click", function () {
tabladata = $("#tabla").DataTable({
destroy: true,
responsive: true,
ordering: false,
"ajax": {
url: "@Url.Action("ListarIntegrantesUnidad", "Mantenedor")",
type: "POST",
datatype: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ idunidad: $("#cbbunidad option:selected").val() })
},
"columns": [
{ "data": "intNombre" },
{ "data": "intFechaNacimiento" },
{ "data": "intEdad" },
{ "data": "intSexo" },
{ "data": "intTipoDocumento" },
{ "data": "intNumeroDocumento" },
{
"defaultContent": '<button type="button" class="btn btn-primary btn-sm btn-editar"></button>' +
'<button type="button" class="btn btn-danger btn-sm btn-retirar ms-2">^__i class="fas fa-trash"></button>',
"orderable": false,
"searchable": false,
"width": "90px"
}
],
"language": {
"url": "https://cdn.datatables.net/plug-ins/2.0.2/i18n/es-ES.json",
}
})
})
</script>
}
And the error message that is given is:
DataTables warning:table id=tabla - Ajax error. For more information about this error, please see http://datatables.net/tn/7
I am relatively new to web programming and appreciate any help you can give me.