0

Tengo mi datatables funcional cuando esta en una resolución alta, pero cuando esta en una pantalla chica no captura los datos del servidor.

Pantalla grande: introducir la descripción de la imagen aquí

Pantalla chica: introducir la descripción de la imagen aquí

Como sino reconociera cada fila correctamente.

Acá la forma en la que creo la tabla con datatables:

var table = $('#table').DataTable({
    destroy: true,
    filter: false,
    processing: true,
    serverSide: true,
    autoWidth: true,
    ajax: {
        url: 'tabla/usuarios',
        global: false,
        method: 'POST',
        data: function (d) {
            d.campo = $('input[name=filter_campo]').val();
            d.perfil = $('select[name=filter_perfil]').val();
            d.estados = $('select[name=filter_estados]').val();
        }
    },
    columns: [
            {data: 0, searchable: false, orderable: false, render: function( data, type, full, meta ){
                return meta.row+1;
            }
        },
        {data: 1},
        {data: 2},
        {data: 10},
        {data: 11},
        {data: 5, 
            render: function( data, type, full, meta ){
                if (data) {
                    return '';
                }else {
                    return '';
                }
            }
        },
        {data: 9, searchable: false, orderable: false},
    ],
    search: {
        "regex": true
    },
    order: [[1, 'asc']],
    fnDrawCallback: function() {
        $("[name='my-checkbox']").bootstrapToggle();
        $('[data-toggle="popover"]').popover({
            placement : 'top',
            html : true
        }); 
    }
});

editar("#table tbody",table);

Como obtengo los datos de la tabla al hacer clic en uno de los botones, ej "Editar":

var editar = function(tbody, table){
        $(tbody).on("click","button.editar", function(){
            var data = table.row($(this).parents("tr")).data();
            $('#editar_id').val(data[0]);
            $('#editar_alias').val(data[1]);
            $('#editar_correo').val(data[2]);
            $('#editar_perfil').val(data[8]);
            $('#ModalEditar').modal('show');
            $("#editar-alias").first().focus();
        })
    }

La demostración de la web del plugin

Nota: en el responsive pierde la propiedad el botón tipo switch

Actualización 1: Acá el error que arroja la consola: introducir la descripción de la imagen aquí

6
  • En la captura de pantalla dice que el error cae en la línea usuarios:1228, ¿puedes por favor actualizar tu pregunta resaltando la línea de código del error? Commented el 12 ene. 2017 a las 23:03
  • @Mauricio listo, actualizado :D
    – bypabloc_
    Commented el 12 ene. 2017 a las 23:11
  • @Mauricio imprimo valor con "console.debug(data)" y me dice "undefined"
    – bypabloc_
    Commented el 12 ene. 2017 a las 23:21
  • Pablo, el error se debe a que data no tiene datos y antes de esta línea: $('#editar_id').val(data[0]); debes validar que data sea diferente de undefined. Revisa bien qué valores llegan aquí: var data = table.row($(this).parents("tr")).data(); Commented el 13 ene. 2017 a las 13:05
  • Explico. Datatables en cada fila tiene su data, pero cuando se vuelve responsive crea otra fila, y en esa file no está almacenada la data.
    – bypabloc_
    Commented el 13 ene. 2017 a las 16:30

1 respuesta 1

0

Con el plugin datatables cuando se vuelve responsive se crea otra fila, como podemos verlo acá: introducir la descripción de la imagen aquí

Para capturar la data tenemos que diferenciar si el boton esta en una columna hijo, de la siguiente manera:

var editar = function(tbody, table){
    $(tbody).on("click","button.editar", function(){
        if(table.row(this).child.isShown()){
            var data = table.row(this).data();
        }else{
            var data = table.row($(this).parents("tr")).data();
        }
        $('#editar_id').val(data[0]);
        $('#editar_alias').val(data[1]);
        $('#editar_correo').val(data[2]);
        $('#editar_perfil').val(data[8]);
        $('#editar_ver_perfil').val(data[4]);
        $('#ModalEditar').modal('show');
        $("#editar-nombres").first().focus();
    })
}

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.