0

Estoy empezando con el uso de DataTable y poseo 2 consultas:

Consulta 1

Estoy migrando un proyecto que esta escrito 100% en PHP pero por la cantidad de datos en la Base de Datos (BD) ya es necesario tratar los datos con ajax y estoy muy novato en ese lenguaje.

Mi problema es el siguiente.

Tengo una tabla:

<table id="dt_pedidos" class="table table-bordered table-hover ">
    <thead>
     <tr>
        <th>ID Pedido</th>
        <th>Fecha de su Pedido</th>
        <th>Monto</th>
        <th>Banco Emisor / Nro. de Transferencia</th>
        <th>Status</th>
     </tr>
        </thead>
        <tbody>
        </tbody>

     </table>

Y mi código js que genera los datos:

$(document).ready(function() {
     listar();
 });

var listar = function(){
    var table = $('#dt_pedidos').DataTable({

        "language": idioma_espanol,
        "ajax": {
            "method":"POST",
            "url":"funciones/listar_t.php"
        },
        "columns":[
            {"data":"id"},
            {"data":"fecha_pedido"},
            {"data":"monto"},
            //{"data":"banco_emisor"},
            //{"data":"nro_transf"},
            {"data":"banco_emisor", "data": 'nro_transf'},
            {"data":"status_pedido"}
        ]

});
//console.log(table);

}

No he logrado unir ambos datos para que se muestren en una sola columna, de momento como solución temporal he optado por crear 2 columnas diferentes una para "data":"banco_emisor" y otra para "data": 'nro_transf' pero quisiera mostrar estos datos en una sola columna.

He intentado lo sugerido en: Como juntar 2 columnas en un datatables sin éxito al igual que he tratado de hacer un render pero me da como resultado que el dato es undefined imagino que he tratado de aplicar una solución de una forma incorrecta.

Consulta 2

Por último la columna status lógicamente me trae los resultados esperados que son los que están en mi BD en dicha columna trae como resultado letras que son: E, C, E y R. Las letras corresponden a:

E = Esperando
C = Conformado
E = Entrega
R = Rechazado

ESPERANDO = '<div class="w-70 mx-auto alert alert-warning" role="alert" data-toggle="popover" title="EN ESPERA" data-content="Su pago aun no ha sido conformado.">
      EN ESPERA  <i class="fa fa-clock"></i>
    </div>'

CONFORMADO = '<div class="w-70 mx-auto alert alert-success" role="alert" data-toggle="popover" title="CONFORMADO" data-content="Este mensaje es indicativo de que su pago ya fue aprobado, queda a la espera de la entrega de su pedido.">
       CONFORMADO <i class="fa fa-clock"></i>
    </div>'

RECHAZADO = '<div class="text-center w-70 mx-auto alert alert-danger" role="alert" data-html="true" data-toggle="popover" title="RECHAZADO" data-content="Su pago fue rechazado, por el siguiente motivo:<br> '.{"data":"motivo"}.'.">
             RECHAZADO  <i class="fa fa-exclamation-triangle"></i>
           </div>';

ENTREGA = '<form autocomplete="off" class="was-validated" method="get" action= "ver_pedido.php?id_pedido='.{"data":"id"}.'">
            <input type="hidden" name="id_pedido" value="'.{"data":"id"}.'">
            <button data-html="true" data-toggle="popover" title="SECCION DE DESCARGAS" data-content="Aca podra acceder a su pedido." type="submit" class="btn btn-success" >DESCARGAR  <i class="fa fa-file-download"></i></button> </form>'

Como hago para mostrar en DataTable la salida esperada según el resultado de: {"data":"status_pedido"}.

2
  • Y si uses esos campos en tu consulta sql? Commented el 11 abr. 2019 a las 16:28
  • Ok con la sugerencia desde mi PHP donde hago el query he logrado dar solucion a mi consulta 2 ahora falta mi consulta 1 Commented el 11 abr. 2019 a las 18:35

3 respuestas 3

1

Suponiendo que recibes un json correcto desde listar_t.php donde haces un query y obtienes los campos que quieres imprimir en la tabla: id, fecha_pedido, monto, banco_emisor, nro_transf, status_pedido. Lo que sugiero hacer es manipular el json a travez de un array y un bucle $.each, para formatear la tabla de la manera que deseas:

$.ajax({
    url: "funciones/listar_t.php",
    type: "POST",
    dataType: "json",
    success: function (data, textStatus, jqXHR) {
        var datos = [];
        $.each(data, function (i, col) {
            var status="";
            //validamos el campo de la consulta 2
            switch(col.status_pedido){ 
                 case 'E':{
                    status = '<div class="w-70 mx-auto alert alert-warning" role="alert" data-toggle="popover" title="EN ESPERA" data-content="Su pago aun no ha sido conformado.">
                                  EN ESPERA  <i class="fa fa-clock"></i>
                                </div>';
                    break;
                 }
                 case 'C':{
                    status = '<div class="w-70 mx-auto alert alert-success" role="alert" data-toggle="popover" title="CONFORMADO" data-content="Este mensaje es indicativo de que su pago ya fue aprobado, queda a la espera de la entrega de su pedido.">
                               CONFORMADO <i class="fa fa-clock"></i>
                            </div>';
                    break;
                 }
                 case 'E':{
                    status= '<form autocomplete="off" class="was-validated" method="get" action= "ver_pedido.php?id_pedido='.{"data":"id"}.'">
                    <input type="hidden" name="id_pedido" value="'.{"data":"id"}.'">
                    <button data-html="true" data-toggle="popover" title="SECCION DE DESCARGAS" data-content="Aca podra acceder a su pedido." type="submit" class="btn btn-success" >DESCARGAR  <i class="fa fa-file-download"></i></button> </form>';
                    break;
                 }
                 case 'R':{
                    status = '<div class="text-center w-70 mx-auto alert alert-danger" role="alert" data-html="true" data-toggle="popover" title="RECHAZADO" data-content="Su pago fue rechazado, por el siguiente motivo:<br> '.{"data":"motivo"}.'.">
                                 RECHAZADO  <i class="fa fa-exclamation-triangle"></i>
                               </div>';
                 }
            }
            datos.push([col.id, col.fecha_pedido, col.monto, col.banco_emisor + ' ' + col.nro_transf, status ]); //Aqui hacemos un push al arreglo vacio, para añadir los cambios
        });

        $('#dt_pedidos').DataTable({
            destroy: true,
            data: datos,  //pasamos el arreglo
            columns: [
                {title: "ID Pedido"},  //generamos las columnas
                {title: "Fecha de su Pedido"},
                {title: "Monto"},
                {title: "Banco Emisor / Nro. de Transferencia"},
                {title: "Status"}
            ]
        });
    },
    error: function (jqXHR, textStatus, errorThrown) {
        //codigo en caso de error ajax
    }
});

Y el html de tu tabla quedaría mas sencillo, ya que el constructor de DataTable, te formara la tabla:

<table id="dt_pedidos" class="table table-bordered table-hover "></table>
1
  • Gracias por la sugerencia pero la he visto muy compleja para implementarla en mi migración, pero de igual manera estaré dando estudio a su linea de código ya que me parece muy interesante. Estaré colocando la respuesta que al final utilice, muchas gracias. Commented el 12 abr. 2019 a las 1:29
1

En la $consulta haces la union de las columnas que necesitas y en el recorrido del arreglo de la consulta compuebas si ROW['status'] es = C,R, etc dependiendo de como estén almacenados en la BD, despues en una variable $tabla obtienes los campos que deseas llamar en el script de dataTables (Sólo hice el if del status C)

<?php

        include('comexion_db.php');     
        $consulta = "SELECT tabla1.status,tabla2.otro_campo
                     FROM tabla1 
                     LEFT JOIN tabla2 ON tabla1.id_tabla = tabla2.id_tabla;";
        $registro = mysqli_query($con, $consulta);

        $i=1;
        $tabla = "";
        while ($row = mysqli_fetch_array($registro)) {


            if ($row['status'] == 'C') { 

                $status = '<div class=\"w-70 mx-auto alert alert-warning\" role=\"alert\" data-toggle=\"popover\" title="\EN ESPERA\" data-content=\"Su pago aun no ha sido conformado.\">
          EN ESPERA  <i class=\"fa fa-clock\"></i>
        </div>'; 
            } 

        $tabla.='{"otro_campo":"'.$row['otro_campo'].'","status":"'.$status.'"},';
        $i++;

        }

        $tabla = substr($tabla,0, strlen($tabla) - 1);

        echo '{"data":['.$tabla.']}';
    ?>
0

Para mi primera consulta he solucionado con el siguiente código:

{
            "data": "banco_emisor",
            "render": function ( data, type, row ) {
                if(type === 'display'){
                    return row.banco_emisor + " " + row.nro_transf;
                }else{
                    return data;
                }
            }
        },

Lo he logrado cambiando la linea return data.banco_emisor + " " + data.nro_transf; por return row.banco_emisor + " " + row.nro_transf;

Para mi segunda consulta lo he solucionado desde el While de mi query, he efectuado una serie de if que imprimen la linea de código según sea el caso.

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.