"Uncaught TypeError: Can not read property '0' of undefined" when set to a small screen (responsive)
"Uncaught TypeError: Can not read property '0' of undefined" when set to a small screen (responsive)
I have my functional datatables when it is in high resolution, but when it is on a small screen it does not capture data from the server.
Large screen: https://i.stack.imgur.com/pGPA2.png
Small Screen: https://i.stack.imgur.com/ABQ74.png
As if not recognize each row correctly.
Here's the way I created 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 '<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);
How do I get the data from the table when I click on one of the buttons, example "Editar" (Edit in spanish):
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();
})
}
Note: in the responsive the property loses the button "switch".
I'm from venezuela, excuse my little English.
Answers
Happy to take a look if you post a link to a test case showing the issue, per the forum rules.
Allan
no puedo editar la publicacion