0

Estoy cargando tablas (datatables con Tabledit) de manera dinamica usando clases para hacer llamados, inicialmente lo tenia así:

$('.tabla').each(function() {
   var $table = $(this);
   var $dataTable = $table.DataTable({
     "processing": true,
     "serverSide": true,
     "searching": false,
     "paging": true,
     "lengthMenu": [3,5,10],
     "destroy":true,
     "order": [],
     "language": {
       "emptyTable": "No hay datos disponibles",
       "processing": "Cargando...",
       "lengthMenu": "Mostrar _MENU_ registros",
       "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
       "paginate": {
       "previous": "Anterior",
       "next": "Siguiente"
       }
     },
     "ajax": {
       url: "fetch.php",
       type: "POST"
     }
 });
 // AGREGA Y EJECUTA BOTONES DE EDITAR, BORRAR
 $table.on('draw.dt', function() {
   $table.Tabledit({
     url: 'action.php',
     dataType: 'json',
     columns: {
       identifier: [0, 'id'],
       editable: [
         [1, 'first_name'],
         [2, 'last_name'],
         [3, 'gender', '{"1":"Male","2":"Female"}']
       ]
     },
     restoreButton: false,
     onSuccess: function(data, textStatus, jqXHR) {
       if (data.action == 'delete') {
         $('#' + data.id).remove();
         $('.tabla').DataTable().ajax.reload();
       }
     }
   });
 });
});

pero con toda la creacion de tablas y demas, este evento nunca es llamado y tengo entendido que cuando se crea codigo html desde jquery de manera dinamica, se debe de utilizar:

$(document).on('click','.tabla',function(){..... resto de codigo igual que el de arriba

y funciona, pero claramente la tabla (datatable y tabledit) aparecerán visualmente cuando haga click sobre su espacio, la pregunta es: COMO PUEDO HACER PARA QUE NO TENGA QUE HACER CLICK PARA QUE CARGUE LA TABLA SINO QUE CARGUE SOLA CUANDO INICIA LA PAGINA? QUE EVENTO DEBO DE CAMBIAR EN EL $(document).on('click

Dejo todo el codigo que tengo en el JS:

$(document).ready(function() {

  $.getJSON('contenido.php', function(data) {
    console.log(data);
    for (i = 0; i < data.length; i++) {
      $('#tab').append(ejes(i,data));
      for (y = 0; y < data[i].objetivo.length; y++) {
        $('#contenido'+i+'').append(objetivos(i,y,data));
        for (x = 0; x < data[i].objetivo[y].meta.length; x++) {
          $('#contenido'+i+y).append(formularios(i,y,x,data));
          $('#contenido'+i+y+x).append(tablas());
  
        }
      }
    }
  });   

// $documento.each('.tabla', function(){
  $(document).ready('.tabla',function(){
  // $('.tabla').each(function() {
    console.log($(this));
    var $table = $(this);
    var $dataTable = $table.DataTable({
      "processing": true,
      "serverSide": true,
      "searching": false,
      "paging": true,
      "lengthMenu": [3,5,10],
      "destroy":true,
      "order": [],
      "language": {
        "emptyTable": "No hay datos disponibles",
        "processing": "Cargando...",
        "lengthMenu": "Mostrar _MENU_ registros",
        "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
        "paginate": {
        "previous": "Anterior",
        "next": "Siguiente"
        }
      },
      "ajax": {
        url: "fetch.php",
        type: "POST"
      }
  });
  // AGREGA Y EJECUTA BOTONES DE EDITAR, BORRAR
  $table.on('draw.dt', function() {
    $table.Tabledit({
      url: 'action.php',
      dataType: 'json',
      columns: {
        identifier: [0, 'id'],
        editable: [
          [1, 'first_name'],
          [2, 'last_name'],
          [3, 'gender', '{"1":"Male","2":"Female"}']
        ]
      },
      restoreButton: false,
      onSuccess: function(data, textStatus, jqXHR) {
        if (data.action == 'delete') {
          $('#' + data.id).remove();
          $('.tabla').DataTable().ajax.reload();
        }
      }
    });
  });
});
4
  • Tu código debe ir dentro del $( document ).ready(función(){}); garantiza que al estar listo el DOM, se ejecute tu código
    – Francisco
    Commented el 31 dic. 2020 a las 20:57
  • Francisco, esta dentro del DOM,y por eso funciona con el click pero lo que no quiero es que tenga que darle click para que aparezca la tabla Commented el 31 dic. 2020 a las 23:34
  • Exactamente es lo que te digo, en vez de usar el envento click, usa el estado "ready" del DOM, así una vez se carguen todos los elementos de tu página, se generarán automáticamente tus datatables
    – Francisco
    Commented el 1 ene. 2021 a las 0:48
  • Lo puse asi: $(document).ready('.tabla',function(){ y tampoco funciono, sin '.tabla', deje el codigo del js como lo tengo Commented el 1 ene. 2021 a las 1:18

1 respuesta 1

0

La idea es la siguiente, puede que me haya comido alguna llave de tu código, lo copié al vuelo. Acoto que solo debes tener un $( document ).ready() en tu archivo de código, y dentro del mismo escribes todas tus funciones

$( document ).ready(función(){
   
 $('.tabla').each(function() {
    console.log($(this));
    var $table = $(this);
    var $dataTable = $table.DataTable({
      "processing": true,
      "serverSide": true,
      "searching": false,
      "paging": true,
      "lengthMenu": [3,5,10],
      "destroy":true,
      "order": [],
      "language": {
        "emptyTable": "No hay datos disponibles",
        "processing": "Cargando...",
        "lengthMenu": "Mostrar _MENU_ registros",
        "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
        "paginate": {
        "previous": "Anterior",
        "next": "Siguiente"
        }
      },
      "ajax": {
        url: "fetch.php",
        type: "POST"
      }
  });
  // AGREGA Y EJECUTA BOTONES DE EDITAR, BORRAR
  $table.on('draw.dt', function() {
    $table.Tabledit({
      url: 'action.php',
      dataType: 'json',
      columns: {
        identifier: [0, 'id'],
        editable: [
          [1, 'first_name'],
          [2, 'last_name'],
          [3, 'gender', '{"1":"Male","2":"Female"}']
        ]
      },
      restoreButton: false,
      onSuccess: function(data, textStatus, jqXHR) {
        if (data.action == 'delete') {
          $('#' + data.id).remove();
          $('.tabla').DataTable().ajax.reload();
        }
      }
    });

});
1
  • Francisco ya lo pude solucionar, la solucion fue incluir todo el codigo del datatable y tabledit en el $.getJSON('contenido.php', function(data) { que arma las tablas con lo que recibe. funciono, el problema que tengo es que los botones de edit y delete del tabledit no se ven, es como si fuera algo del tamaño de la tabla.... Gracias por tu ayuda , muy valiosa Commented el 3 ene. 2021 a las 2:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.