错误“Uncaught TypeError：无法读取属性'0'未定义”en datatables.net cuando se ajusta a una pantalla chica（响应）

Question

我有高分辨率的功能数据表，但是当它在小屏幕上时，它不会从服务器捕获数据。

大屏幕：

小屏幕：

好像没有正确识别每一行。 这是我使用数据表创建表的方式：

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 '<input id="toggle" data-info="toggle'+full.id+'" name="my-checkbox" type="checkbox" checked data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">';
                        }else {
                            return '<input id="toggle" data-info="toggle'+full.id+'" name="my-checkbox" type="checkbox" data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-onstyle="success" data-offstyle="danger">';
                        }
            }
        },
        {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);

当我点击其中一个按钮时，如何从表中获取数据，例如“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();
    })
}

注意：在响应中，属性会丢失按钮“switch”。

我来自委内瑞拉，原谅我的小英语。

更新1 没有响应：

响应：

更新2 没响应：

响应：

Answer 1

因此，您必须检查按钮的位置，然后选择带输入的父行。

$(tbody).on("click","button.editar", function(){
    var button = $(this),  //button that was clicked
        row = button.closest("tr");  //table row parent is in

    //check to see if we are in a child row, 
    // if we are, select the previous one
    if (row.is(".child")) {  //if we are 
        row = row.prev("tr");
    }

    console.log(row);

});

Answer 2

使用datatables插件，当它变为响应时，会创建另一行，我们可以在这里看到：

要捕获数据，我们必须区分按钮是否在子列中，如下所示：

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

Answer 3

问题是你刷新了。

尝试使用$('#dt').DataTable().ajax.reload();