Error "Uncaught TypeError: Can not read property '0' of undefined" in datatables.net when it fits a small screen (responsive)

Question

Error "Uncaught TypeError: Can not read property '0' of undefined" in datatables.net when it fits a small screen (responsive)

Navigation

#1 by (0 votes)

0

I have my datatables functional when it is in a high resolution, but when it is on a small screen it does not capture the server data.

Large screen:

Small screen:

As otherwise I would recognize each row correctly.

Here's how I create the table with 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);

How do I get the data from the table when I click on one of the buttons, eg "Edit":

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();
        })
    }

The plugin web demonstration

Note: in responsive loses ownership on switch type button

Update 1: Here is the error thrown by the console:

jquery datatables

asked by Pablo Contreras 12.01.2017 в 08:09

source

1 answer

reCAPTCHA MAILCHIMP subscribers Count checkboxes marked within a TableLayout

score 0 · Accepted Answer

With the datatables plugin when it becomes responsive another row is created, as we can see it here:

To capture the data we have to differentiate if the button is in a child column, in the following way:

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();
    })
}