0

$(document).ready(function() {

        var accion = "";

        var table = $("#tablaAgentes").DataTable({
            "ajax": {
                "url": "ajax/agentes.ajax.php",
                "type": "POST",
                "dataSrc": ""
            },

            "processing": true,

            'order': [
                [8, 'asc']
            ],

            "columnDefs": [{
                    "targets": [0], 
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": 4,
                    "sortable": true,
                    "searchable": true,
                    "render": function(data, type, full, meta) {
                        if (data == 1) {
                            // return "<div class='bg-info color-palette text-center'>SI</div> "
                            return "<h5><div class='badge bg-primary color-palette text-center'>&nbsp;SI&nbsp;</div></h5>";
                            //return "<h5><span class=\"badge bg-info\">ACTIVO</span></h5></div>"
                        } else {
                            // return "<div class='bg-danger color-palette text-center'>NO</div>"
                            return "<h5><div class='badge bg-danger color-palette text-center'>NO</div></h5>";
                            //return "<h5><span class=\"badge bg-danger\">INACTIVO</span></h5></div>"
                        }
                    }
                },
                {
                    "targets": 5,
                    "sortable": false,
                    "render": function(data, type, full, meta) {
                        return "<center>" +
                            "<button type='button' class='btn btn-primary btn-sm btnEditar' data-toggle='modal' data-target='#modal-gestionar-agente' title='Editar Agente'> " +
                            "<i class='fas fa-pencil-alt'> </i> " +
                            "</button> " +
                            "<button type='button' class='btn btn-danger btn-sm btnEliminar' title='Eliminar Agente'> " +
                            "<i class='fas fa-trash'> </i> " +
                            "</button>" +
                            "</center>";
                    }
                }
            ],
            "columns": [{
                    "data": "idagente"
                },
                {
                    "data": "legajo"
                },
                {
                    "data": "apyn",
                    name: 'estado',
                    width: '50%',
                    className: "text-left"
                },
                {
                    "data": "dependencia_serv"
                },
                {
                    "data": 'estado',
                    name: 'estado',
                    width: '5%',
                    className: "text-center"
                },
                {
                    "data": "acciones",
                    name: 'acciones',
                    width: '8%',
                    className: "text-center"
                }
            ],

            "language": {
                "url": "vistas/assets/dist/css/es-ES.json"
            },
        });

        $(".btn-buscar-agente").on('click', function() {

            $('#tablaAgentes').dataTable().fnDestroy();

            var accion = "";
            accion = "";
            var apellido = $("#txtApellidoBuscar").val().trim();

            var datos = new FormData();
            datos.append('accion', accion);
            datos.append('apellido', apellido);

            var table = $("#tablaAgentes").DataTable({
                "ajax": {
                    "url": "ajax/agentes.ajax.php",
                    "type": "POST",
                    "dataSrc": ""
                },

                "processing": true,

                'order': [
                    [8, 'asc']
                ],

                "columnDefs": [{
                        "targets": [0], 
                        "visible": false,
                        "searchable": false
                    },
                    {
                        "targets": 4,
                        "sortable": true,
                        "searchable": true,
                        "render": function(data, type, full, meta) {
                            if (data == 1) {
                                // return "<div class='bg-info color-palette text-center'>SI</div> "
                                return "<h5><div class='badge bg-primary color-palette text-center'>&nbsp;SI&nbsp;</div></h5>";
                                //return "<h5><span class=\"badge bg-info\">ACTIVO</span></h5></div>"
                            } else {
                                // return "<div class='bg-danger color-palette text-center'>NO</div>"
                                return "<h5><div class='badge bg-danger color-palette text-center'>NO</div></h5>";
                                //return "<h5><span class=\"badge bg-danger\">INACTIVO</span></h5></div>"
                            }
                        }
                    },
                    {
                        "targets": 5,
                        "sortable": false,
                        "render": function(data, type, full, meta) {
                            return "<center>" +
                                "<button type='button' class='btn btn-primary btn-sm btnEditar' data-toggle='modal' data-target='#modal-gestionar-agente' title='Editar Agente'> " +
                                "<i class='fas fa-pencil-alt'> </i> " +
                                "</button> " +
                                "<button type='button' class='btn btn-danger btn-sm btnEliminar' title='Eliminar Agente'> " +
                                "<i class='fas fa-trash'> </i> " +
                                "</button>" +
                                "</center>";
                        }
                    }
                ],
                "columns": [{
                        "data": "idagente"
                    },
                    {
                        "data": "legajo"
                    },
                    {
                        "data": "apyn",
                        name: 'estado',
                        width: '50%',
                        className: "text-left"
                    },
                    {
                        "data": "dependencia_serv"
                    },
                    {
                        "data": 'estado',
                        name: 'estado',
                        width: '5%',
                        className: "text-center"
                    },
                    {
                        "data": "acciones",
                        name: 'acciones',
                        width: '8%',
                        className: "text-center"
                    }
                ],

                "language": {
                    "url": "vistas/assets/dist/css/es-ES.json"
                },
            });

        });

    })
<div>
    <div class="row">
        <div class="col-sm-4">
            <button type="button" class="btn btn-info btn-sm mb-4 btn-agregar-agente btnAgregar" data-toggle="modal" data-target="#modal-gestionar-agente" data-dismiss="modal" data-controls-modal="modal-gestionar-agente" data-backdrop="static" data-keyboard="false">
                <i class="fas fa-plus-square"></i> Agregar Agente
            </button>
        </div>
        <div class="col-sm-8">
            <form class="form-inline justify-content-end">
                <div class="form-group mx-sm-1 mb-2">
                    <label for="txtApellidoBuscar"><span class="text-danger">*</span>Apellido:</label>
                </div>
                <div class="form-group mx-sm-1 mb-2">
                    <input type="text" class="form-control form-control-sm" name="apellido" id="txtApellidoBuscar" onblur='may(this);' onkeydown="onlytext(this);" onkeyup="onlytext(this);">
                </div>
                <button type="button" class="btn btn-sm btn-dark mb-2 btn-buscar-agente btnBuscarAgente" title="Carga solo los agentes con el apellido que busca">
                    <i class="fas fa-search"></i>
                </button>
                <div class="form-group mx-sm-1 mb-2">
                    <button type="button" class="btn btn-sm btn-info mb-0 btn-agregar-buscar-todos btnBuscarTodos" title="Carga todos los agentes registrados en el sistema">
                        <i class="fas fa-search-plus"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
            
<table id="tablaAgentes" class="table bg-white table-hover table-bordered wrap table-sm" style="width:100%;">
    <thead class="bg-primary">
        <tr class="smal text-uppercase text-center">
            <th scope='row'>idagente</th>
            <th scope='row'>LEGAJO</th>
            <th scope='row'>APELLIDO Y NOMBRE</th>
            <th scope='row'>DEPENDENCIA DE SERVICIO</th>
            <th scope='row'>Act</th>
            <th scope='row'>ACCION</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Tengo un datatable que al iniciar se carga normalmente y puedo realizar todas las operaciones de los botones que tiene cada fila de la grilla, pero intento realizar un filtro personal mediante una caja de texto donde especifico parte de un apellido y al darle click en el boton me vuelve a cargar los mismo datos y al momento de querer editar o eliminar una fila no me devuelve los datos de la grilla como que pierde la referencia de la recarga, es como que los botones no tienen acciones, ademas me carga los mismos datos y no me puede dar cuenta donde está el error.

Paso todos los proceso que realizo para ver si alguien me puede dar una mano.

llamo el ajax llamo al controlador llamo al modelo muestro la vista

1 respuesta 1

0

Cuando haces la carga de la tabla desde el evento del botón $(".btn-buscar-agente") y obtienes los datos del formulario debes, agregar los datos en la llamada ajax de la datatable. Usa el atributo "data" y los datos como JSON (ref. ajax.data). Verifica en la función PHP si estas recibiendo los datos correctamente.

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

var table = $("#tablaAgentes").DataTable({
            "ajax": {
                "url": "ajax/agentes.ajax.php",
                "type": "POST",
                "data": datos,
                "dataSrc": "",
            },

            "processing": true,
            "serverSide": true,
            'order': [
                [8, 'asc']
            ],

            "columnDefs": [{
                    "targets": [0], 
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": 4,
                    "sortable": true,
                    "searchable": true,
                    "render": function(data, type, full, meta) {
                        if (data == 1) {
                            // return "<div class='bg-info color-palette text-center'>SI</div> "
                            return "<h5><div class='badge bg-primary color-palette text-center'>&nbsp;SI&nbsp;</div></h5>";
                            //return "<h5><span class=\"badge bg-info\">ACTIVO</span></h5></div>"
                        } else {
                            // return "<div class='bg-danger color-palette text-center'>NO</div>"
                            return "<h5><div class='badge bg-danger color-palette text-center'>NO</div></h5>";
                            //return "<h5><span class=\"badge bg-danger\">INACTIVO</span></h5></div>"
                        }
                    }
                },
                {
                    "targets": 5,
                    "sortable": false,
                    "render": function(data, type, full, meta) {
                        return "<center>" +
                            "<button type='button' class='btn btn-primary btn-sm btnEditar' data-toggle='modal' data-target='#modal-gestionar-agente' title='Editar Agente'> " +
                            "<i class='fas fa-pencil-alt'> </i> " +
                            "</button> " +
                            "<button type='button' class='btn btn-danger btn-sm btnEliminar' title='Eliminar Agente'> " +
                            "<i class='fas fa-trash'> </i> " +
                            "</button>" +
                            "</center>";
                    }
                }
            ],
            "columns": [{
                    "data": "idagente"
                },
                {
                    "data": "legajo"
                },
                {
                    "data": "apyn",
                    name: 'estado',
                    width: '50%',
                    className: "text-left"
                },
                {
                    "data": "dependencia_serv"
                },
                {
                    "data": 'estado',
                    name: 'estado',
                    width: '5%',
                    className: "text-center"
                },
                {
                    "data": "acciones",
                    name: 'acciones',
                    width: '8%',
                    className: "text-center"
                }
            ],

            "language": {
                "url": "vistas/assets/dist/css/es-ES.json"
            },
        });

En mi caso para procesar la respuesta en el php para el datatable uso la siguiente función: (ref. server-side)

public static function JSONoutput($data, $recordsTotal, $recordsFiltered, $draw = 1) {
    $output = array(
        "draw"            => $draw,
        "recordsTotal"    => $recordsTotal,
        "recordsFiltered" => $recordsFiltered,
        "data"            => $data,
    );
    return json_encode($output);
}
2
  • he intentado hacer lo que me pasat en el ejemplo, pero me sale este error: DataTables warning: table id=tablaAgentes - Invalid JSON response. For more information about this error, please see datatables.net/tn/1 el 13 nov. 2022 a las 18:11
  • De acuerdo a la documentación el error puede ser debido a que la respuesta no es JSON valido. Actualice mi respuesta con la función que utilizo generar el JSON de respuesta para la datatable. También agregue el atributo "serverSide": true, en la configuración del datatable. el 14 nov. 2022 a las 11:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.