Tengo un datatables que carga aproximadamente 25.000 registros.
Actualmente, lo tengo con filtros individuales por columnas (https://datatables.net/examples/api/multi_filter.html).
Todo funciona correctamente, pero lo que necesito ahora es que al momento de cargar la página, la tabla se muestre en blanco (sin registros) y que al momento de escribir algo en el o los inputs (keyup), muestre o cargue los registros asociados a dicha búsqueda.
Actualmente mi tabla esta creada de la siguiente manera:
<div class="box-body">
<div class="table-responsive">
<table id="listado" class="table table-bordered table-hover dt-resposive display nowrap">
<thead>
<tr>
<th>FOLIO GRAL.</th>
<th>EMPRESA</th>
<th>PROVEEDOR</th>
<th>APROBADA POR</th>
<th>FECHA APROBACION</th>
<th>SOLICITADA POR</th>
<th>FECHA SOLICITUD</th>
<th>NETO</th>
<th>IVA</th>
<th>TOTAL</th>
<th>OC</th>
<th>COT</th>
<th>COMP. PAGO</th>
</tr>
</thead>
</table>
</div>
</div>
Y su datatables correspondiente:
$(document).ready(function() {
$('#listado').DataTable({
"ajax" : "list_buscador.php",
"columns" :[
{
"sClass": "alignRight",
"data" : "folio_gral",
},{
"sClass": "alignRight",
"data" : "null",
'render': function (data, type, row, meta) {
var emp = row['nom_emp'];
return ''+emp.toUpperCase()+'';
}
},{
"sClass": "alignRight",
"data" : "null",
'render': function (data, type, row, meta) {
var prov = row['proveedor'];
return ''+prov.toUpperCase()+'';
}
},{
"sClass": "alignRight",
"data" : "null",
'render': function (data, type, row, meta) {
var aprobada_por = row['autorizado_por'];
if(aprobada_por == null){
return 'SIN DATOS';
}else{
return ''+aprobada_por.toUpperCase()+'';
}
}
},{
"sClass": "alignRight",
"data": "fecha_cierre",
"render": function (data) {
var dateString = new Date(data);
return moment.utc(dateString).format('DD/MM/YYYY');
}
},{
"sClass": "alignRight",
"data" : "null",
'render': function (data, type, row, meta) {
var creado = row['creada_por'];
return ''+creado.toUpperCase()+'';
}
},{
"sClass": "alignRight",
"data": "fecha_oc",
"render": function (data) {
var dateString = new Date(data);
return moment.utc(dateString).format('DD/MM/YYYY');
}
},{
"sClass": "alignRight",
'data' : "neto",
"render": function (data) {
var neto = data;
return ('$'+number_format(neto));
}
},{
"sClass": "alignRight",
'data' : "iva",
"render": function (data) {
var iva = data;
return ('$'+number_format(iva));
}
},{
"sClass": "alignRight",
'data' : "total",
"render": function (data) {
var total = data;
return ('$'+number_format(total));
}
},{
"sClass": "alignRight",
'data' : null,
'render': function (data, type, row, meta) {
var id_sol = row['id_sol'];
var emp = row['emp'];
return '<a href="ocPDF2.php?id_sol='+id_sol+'&emp='+emp+'" class="glyphicon glyphicon-paperclip" target="_blank" ></a>';
}
},{
"sClass": "alignRight",
'data' : null,
'render': function (data, type, row, meta) {
var id_sol = row['id_sol'];
var emp = row['emp'];
if(id_sol == null){
return '<a href="#myModal" class="glyphicon glyphicon-pushpin" data-toggle="modal" id="' + id_sol + '" data-book-id="'+ emp +'" data-target="#ver-cot"></a>';
}else{
return '<a href="#myModal" class="glyphicon glyphicon-pushpin" data-toggle="modal" id="' + id_sol + '" data-book-id="'+ emp +'" data-target="#ver-cot"></a>';
}
}
},{
"sClass": "alignRight",
'data' : null,
'render': function (data, type, row, meta) {
var id_sol = row['id_sol'];
var id_doc = row['id_doc'];
var emp = row['emp'];
if(id_doc == null){
return '<a href="#myModal" class="glyphicon glyphicon-barcode" data-toggle="modal" id="' + id_sol + '" data-book-id="'+ emp +'" data-target="#subedoc-modal"></a>';
}else{
return '<a href="#myModal" class="glyphicon glyphicon-folder-open" data-toggle="modal" id="' + id_sol + '" data-book-id="'+ emp +'" data-target="#ver-doc"></a>';
}
}
}
],
order: [0, "asc"],
dom: 'Blfrtip',
buttons: [
'excel','print'
],
"iDisplayLength": 300,
"language": {
"emptyTable": "SIN REGISTROS",
"infoEmpty": "",
"search": "Buscar _INPUT_ ",
"info": "Mostrando Pagina _PAGE_ de _PAGES_",
"lengthMenu": "Mostrando _MENU_ Registros",
"infoFiltered": "(Busqueda Desde _MAX_ Registros Totales)",
"paginate": {
"next": "Siguiente",
"previous": "Anterior"
}
},
initComplete: function(){
this.api().columns([0,1,2,3,4,5,6,7,8,9]).every(function () {
let column = this;
let title = column.header().textContent;
// Create input element
let input = document.createElement('input');
input.placeholder = title;
column.header().replaceChildren(input);
// Event listener for user input
input.addEventListener('keyup', () => {
if (column.search() !== this.value) {
column.search(input.value).draw();
}
});
});
}
});
});
Existe la forma de lograr eso? Cualquier orientación se agradece.
Saludos.