首页 > 解决方案 > 数据表:当表响应时,我得到“无法读取未定义数据的属性”

问题描述

我有一个数据表,其中填充了数据库中的 json 数据。 在此处输入图像描述

正如您在最后一列中看到的,有 2 个按钮,一个用于更新数据,另一个用于删除数据。当按下按钮时,NumEmpleado(hidden)、Nombre、email 和 Password 的值传递到一个表单。

在此处输入图像描述

如果我将浏览器的大小调整到足以启动响应性布局,它就可以正常工作。然后,当我单击蓝色按钮(更新)时,控制台说它无法读取该属性。我可以想象是因为响应式布局,但我不知道如何处理它。

在这里,我单击蓝色按钮以加载更新表单上的信息

这是表格代码:

    <div class="table-responsive col-sm-12">
        <table id="dt_cliente" class="table table-bordered table-hover nowrap" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>NumEmpleado</th>
                    <th>Nombre</th>
                    <th>Correo</th>
                    <th>TipoCuenta</th>
                    <th>Operaciones</th>
                </tr>
            </thead>
        </table>
    </div>

这就是表格的填充方式,然后添加更新/删除按钮

var listar = function(){
                $("#cuadro2").slideUp("slow");
                $("#cuadro1").slideDown("slow");
            var table = $("#dt_cliente").DataTable({
                "destroy":true,
                "responsive": true,
                "ajax":{
                    "method":"POST",
                    "url": "listar.php"
                    },
                    "columns":[
                        {"data": "NumEmpleado"},
                        {"data": "nombre"},
                        {"data": "correo"},
                        {"data": "tipoCuenta"},
                        {"defaultContent": "<button type='button' class='editar btn btn-primary'><i class='fa fa-pencil-square-o'></i></button> <button type='button' class='eliminar btn btn-danger' data-toggle='modal' data-target='#modalEliminar' ><i class='fa fa-trash-o'></i></button>"}
                        ],
                        "language": idioma_espanol,
                        "dom": "Bfrtip",
                        "buttons": [
                            {
                                "text": "<i class='fa fa-refresh'></i>",
                                "titleAttr": "Recargar Datos",
                            //  "className": "btn btn-sucess",
                                "action": function(){
                                    listar();
                                }
                            },
                            {
                                extend: 'excelHtml5',
                                text:   '<i class="fa fa-file-excel-o"></i>',
                                titleAttr: 'Excel'
                            },
                            {
                                extend: 'csvHtml5',
                                text:   '<i class="fa fa-file-text-o"></i>',
                                titleAttr: 'CSV'
                            },
                            {
                                extend: 'pdfHtml5',
                                text:   '<i class="fa fa-file-pdf-o"></i>',
                                titleAttr: 'PDF'
                            }
                        ]
                    });
                obtener_data_editar("#dt_cliente tbody", table);
            }

这是从表中获取值以将它们放置在表单上的函数。(蓝色更新按钮)

        var obtener_data_editar = function(tbody, table) {
            $(tbody).on("click", "button.editar", function(){
                var data = table.row($(this).parents("tr")).data();
                var numEmpleado = $("#numEmpleado").val( data.NumEmpleado),
                    nombre = $("#nombre").val( data.nombre ),
                    correo = $("#correo").val(data.correo),
                    password = $("#password").val(data.password),
                    opcion = $("#opcion").val("modificar");

                    $("#cuadro2").slideDown("slow");
                    $("#cuadro1").slideUp("slow");
            });
        } 

感谢您的时间。

标签: phpjquerydatatables

解决方案


我认为问题在于以下任何一个:-

1)听众

2)销毁

3)由于某些问题,它无法找到该变量的值。

请检查所有这些并告诉我它是否解决了问题


推荐阅读