0

me encuentro realizando una tabla que se llena desde una respuesta de ajax. Esta la itero con un bucle for y la pinto en pantalla el plugin de datatable, él hace lo suyo con todo lo demás, pero no con el tbody que no lo reconoce y no toma sus datos.

$(".llamar").click(function () { //función click de todas los anchor clase .llamar
    var id = $(this).attr("data-id");//se captura el data-id 
    var llamada = "";//se inicializa una variable llamada vacia
    llamada = "id="+id;//se llena la variable con el data id
    $.ajax({ //se procesa el data-id por ajax 
      type: "POST",
      url: "llamada.php",
      data: llamada,
      success: function(data){ //se recibe la respuesta del servidor
        var conv = JSON.parse(data); //se parsea la respuesta del servidor para darle formato json
        var i; //se declara una variable iterador
        var html = ''; //se inicializa una variable html vacia
        for (i=0; i< conv.data.length; i++){ //se pasa el conv.data por un bucle for para iterar los resultados
          html += //se llena la variable html
            '<tr>'+
              '<td>' + conv.data[i].tercero + '</td>'+
              '<td>' + conv.data[i].tercero_nom + '</td>'+
              '<td>' + conv.data[i].Documentos + '</td>'+
              '<td>' + '<a><i class="bi bi-search"></i></a>' + '</td>'+
              '<td>' + conv.data[i].Total + '</td>'+
            '</tr>';
          $("#dataResult").html(html);//se pinta en pantalla.
          /* listar(); */
        }
      }
    });
  });

Se supone que al poner listar que una función que llama al dataTable debería mostrarme el resultado con el formato, pero lo que hace es sobre escribirme el dato, dejándome uno solo si esa variable la pongo en el document . ready ya no me lo sobre escribe si no que solo no pone el estilo mostrándome los registros pero sin formato y sin que el plugin los reconozca. Este es el código para llamar el plugin

var listar = function(){
  $("#tablaCorriente").DataTable({
    destroy:true,
    buttons: [
      'copy', 'excel', 'pdf'
    ],
    order: [[4, "desc"]],
    fixedHeader: true,
    sScrollx: true,
    sScrollY: "40vh",
    scrollCollapse: true,
    deferRender: true,
    paging: true,
    language: {
      url: '//cdn.datatables.net/plug-ins/1.13.1/i18n/es-ES.json'
    },
  });

Si lo pongo en el document .ready lo pondría sin la línea del var listar aprecio mucho la ayuda que me puedan brindar gracias

1 respuesta 1

0

Puedes cargar los datos directamente a la tabla desde JSON dentro de la instancia de DataTables sin necesidad de iterar las filas como lo haces, te dejo el código (imaginemos que se hace una consulta MySQL)

$('#tabla_listado_pagos').DataTable({
    ajax:{
        url: 'tuArchivo.php', // en este caso es una consulta MySQL
        data: {
            parametro: valorParametro
        } // data la puedes omitir en caso de que la consulta sea directa
    },
    columns:[
        {data: 'idPago'}
        // Con Colums cargas las columnas de tu consulta
        // Revisa los "render" por si ocupas formatear los datos en tabla
    ],
    // Ahora si viene lo chido :) el aplicar el css lo haces con columnDefs
    columnDefs: [
            {
                targets: '_all', // A que columnas afectaras, aqui a todas
                className: 'fs-11 fs-roboto text-uppercase text-center'
                // ¡Qué reglas css aplicaras!
            }
    ]
 });

La parte de las colecciones de configuraciones ya la sabes, solo te recomiendo usa lo siguiente por si quieres personalizar el idioma:

language:{
    decimal: '',
    emptyTable: 'Sin información de registros de pago',
    info: 'Mostrando de _START_ a _END_ de un total de _TOTAL_ de pagos',
    infoEmpty: 'Mostrando 0 a 0 de 0 de pagos',
    infoFiltered: '(Filtrado de _MAX_ total entradas)',
    infoPostFix: '',
    thousands: ',',
    lengthMenu: 'Mostrar _MENU_ pagos',
    loadingRecords: 'Cargando pagos..',
    processing: 'Procesando pagos..',
    search: 'Filtrar pagos',
    searchPlaceholder: 'Escribe un indicio',
    zeroRecords: 'Sin información de registros de pago (0 registros)',
    paginate: {
        first: 'Primero',
        last: 'Último',
        next: 'Siguiente',
        previous: 'Anterior'
    }
}

Tip: En HTML en la parte de la tabla no uses el y en las columnas deben coincidir a la consulta o bueno lo que marque en "Colums"

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.