2017-01-12 1 views
0

У меня есть мои функциональные данные, когда он находится в высоком разрешении, но когда он находится на маленьком экран не захватывает данные с сервера.Ошибка «Uncaught TypeError: невозможно прочитать свойство« 0 »неопределенного« en datatables.net cuando se ajusta a una pantalla chica (отзывчивый)

Большой экран: enter image description here

Малый экран: enter image description here

Как будто не распознают каждую строку правильно. Вот так я создал таблицу с 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);

Как получить данные из таблицы, когда я нажимаю на одну из кнопок, например, «Editar» (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(); 
 
    }) 
 
}

Примечание: в ответной свойство теряет кнопку "переключатель".

Я из venezuela, извините мой маленький английский.

UPDATE 1 Нет отзывчивым: enter image description here

Отзывчивый: enter image description here

UPDATE 2 Не реагирует: enter image description here

Отзывчивый: enter image description here

+0

Usted саба дие сен [es.so]. Necesitamos más detalles sobre lo que quieres ... и это столько же испанского, сколько я могу сделать за один раз :). В принципе, нам нужно знать: что вы ожидали, чего не случилось, что вы пытались, сообщения об ошибках (как текст, а не изображение) и т. Д. Lo siento, pero esas son las reglas. –

+0

@MikeMcCaughan Что я ожидаю от вас, это показать «модальный», щелкнув по кнопкам, как это делает первое изображение.Первое изображение (на большом экране) показывает модальное, во втором оно отправляет ошибку, говоря, что это не «данные» и поэтому не показывает «модальный». –

+0

В «es.stackoverflow.com» не так много тех, кто владеет этим плагином. –

ответ

0

С плагином DataTables, когда он становится отзывчивым создается еще один ряд, как мы можем видеть здесь: introducir la descripción de la imagen aquí

Чтобы захватить данные, мы должны различать, если кнопка в колонке ребенка, а следующим образом:

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

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

}); 
+0

Направляйте меня на свои вопросы и смотрите на API-интерфейс для детей: это руководство для меня: https://www.datatables.net/examples/api/row_details.html. Thx bro. –

+0

Проверьте мое решение http://stackoverflow.com/questions/41624582/error-uncaught-typeerror-cannot-read-property-0-of-undefined-en-datatables/41644173#41644173 –

0

проблема в том, что вы обновляете.

Попробуйте с $('#dt').DataTable().ajax.reload();