No sé cómo recargar datatable con filtro personal

carlossauco

Hola. Estoy realizando un datatable mediante un filtro porque no quiero que me cargue 3.500 registros en un datatable al iniciar, es por eso que pongo una caja de texto para realizar la búsqueda de personas mediante un apellido o parte de él, me realiza bien la búsqueda y me devuelve 4 registros en este caso como se ve en la imagen, pero no logro que me recargue el datatable que con esos nuevos datos que quiero.

Pongo parte del código para que vean qué es lo que hago y agrego la imagen para que vean que me devuelve los 4 registros.

La verdad no sé cómo refrescar el datatable después de una de las búsquedas que realizo.

$(".btn-buscar-agente").on('click', function() {
            if ($.fn.dataTable.isDataTable('#tablaAgentes')) {
                $('#tablaAgentes').dataTable().fnDestroy();
            }

            var datos = {
                "accion": 'buscarAgente_X_Apellido',
                "apellido": $("#txtApellidoBuscar").val().trim()
            };

            jQuery.ajax({
                type: "POST",
                url: "ajax/agentes.ajax2.php",
                data: datos,
                success: function(data) {
                        console.log(data);
                    } // Success End
                    ,
                error: function(xhr, textStatus, error) {
                    console.log(xhr.statusText);
                    console.log(textStatus);
                    console.log(error);
                }// Error End
            }); //AJAX End
        });

colin

I'm not seeing in that code where you initialise the table. Looking at what you're doing, I suspect that it should go into the ajax's success() function.

3.5k records shouldn't cause a problem, that's not many records to load. If you feel it is, another approach would be to look at server-side processing. For server-side processing, enable serverSide. The protocol is discussed here. Also see examples here. If you download the DataTables repo, there are examples of the server-side scripts here,

Cheers,

Colin

carlossauco

Esto es lo único que hago

    $(document).ready(function() {
        
        var accion = "";
        
        $('#tablaAgentes').DataTable({
        "language": {
                "processing": "Procesando...",
                "lengthMenu": "Mostrar _MENU_ registros",
                "zeroRecords": "No se encontraron resultados",
                "emptyTable": "Ningún dato disponible en esta tabla",
                "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "infoFiltered": "(filtrado de un total de _MAX_ registros)",
                "search": "Buscar Permiso:",
                "infoThousands": ",",
                "loadingRecords": "Cargando...",
                "paginate": {
                    "first": "Primero",
                    "last": "Último",
                    "next": "Siguiente",
                    "previous": "Anterior"
                },
                "info": "Mostrando ( _START_ a _END_ ) de un total de _TOTAL_ registros",
            },
        });
        
        $(".btn-buscar-agente").on('click', function() {
            if ($.fn.dataTable.isDataTable('#tablaAgentes')) {
                $('#tablaAgentes').dataTable().fnDestroy();
            }

            var datos = {
                "accion": 'buscarAgente_X_Apellido',
                "apellido": $("#txtApellidoBuscar").val().trim()
            };

            jQuery.ajax({
                type: "POST",
                url: "ajax/agentes.ajax2.php",
                data: datos,
                success: function(data) {
                        console.log(data);
                    } // Success End
                    ,
                error: function(xhr, textStatus, error) {
                    console.log(xhr.statusText);
                    console.log(textStatus);
                    console.log(error);
                }// Error End
            }); //AJAX End
        });
    });

carlossauco

ya lo solucioné de la siguiente manera

    $(document).ready(function() {

$("#btnBuscarAgente").on('click', function() {
    var datos = {
        "accion": 'buscarAgente_X_Apellido',
        "apellido": $("#txtApellidoBuscar").val().trim()
    };
                
    jQuery.ajax({
        destroy: true,
        processing: true,
        type: "POST",
        url: "ajax/agentes.ajax2.php",
        data: datos,
        dataType: '',
        success: function(data) {
                var table = $('#tablaAgentes').DataTable();
                table.clear().rows.add(data).draw();
                console.log(data);
            } // Success End
            ,
        error: function(xhr, textStatus, error) {
            console.log(xhr.statusText);
            console.log(textStatus);
            console.log(error);
        } // Error End
    }); //AJAX End
});

    })