У меня есть таблица данных, которая заполнена данными JSON из БД.
Как вы можете видеть в последнем столбце, есть 2 кнопки, одна для обновления, а другая для удаления данных.
При нажатии кнопки значение NumEmpleado (скрытый), Nombre, адрес электронной почты и пароль переходит в форму.
Это работает просто отлично, но если я изменю размер своего браузера достаточно, чтобы включить макет отзывчивости. Затем, когда я нажимаю на синюю кнопку (обновление), консоль говорит, что не может прочитать свойство. Я могу себе представить, это из-за адаптивного макета, но я не знаю, как с этим справиться.
Это код таблицы:
<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");
});
}
Спасибо, что уделили время.