Datatable + PDF

gamn2090

Hello, I'm Using datatable to show a list of approved or reproved applications, now it does it just fine, BUT I'd like to put a PDF button to the table so, it generates the pdf with the current content of the table, and I'm trying to do it by add the pertinent code u give to my jquery instruction, but it does not work, I'd like to know how to make it work please...

Data table script

$(document).ready(function(){
    var datatable = $('#mytable').DataTable({
                        buttons: [
                        {
                            extend: 'pdfHtml5',
                            orientation: 'landscape',
                            pageSize: 'LEGAL'
                        }
                    ],                    
                   "ajax": {
                        "url": "../procesos/motor_funciones.php",
                        "type": "POST",
                        "data" : {
                                "accion" : "mostrar_proceso_ret",   //nombre que recibe el switch    
                                }
                   },
                   "language": {
                                     "processing": "No hay registros en el histórico",
                                     "loadingRecords": " ",
                                     "lengthMenu": "Mostrando _MENU_ registros por página",
                                     "zeroRecords": "Nada econtrado - Perdón",
                                     "info": "Mostrando página _PAGE_ de _PAGES_",
                                     "infoEmpty": "No hay registros disponibles",
                                     "infoFiltered": "(filtrado de _MAX_ registros totales)" ,
                                     "search": "Búsqueda"                                             
                                  },
                    "sAjaxDataProp": "",
                    "processing": true,
                    //"pageLength": 20,
                   // "serverSide": true,
                     columns: 
                     [
                        {data:"cedula"},
                        {data:"numero"},
                        {data:"aval"},
                        {data:"razon"},
                        {data:"link"}                       
                      ]    
                         
                }); 
});

the "motor_funciones.php call

case 'mostrar_proceso_ret':                 
                $array = $objRetiros->mostrar_proceso('Retiro',$bandera,$nivel);
                echo $array;
                       break;   

The "mostrar_retiros" function

$query="SELECT * FROM solicitudes_ret WHERE (proceso LIKE '$proceso%')";
                    $result=$this->conn->Execute($query);   
                        
                        $j=0;
                        while(!$result->EOF) 
                        {   
                            for ($i=0, $max=$result->FieldCount(); $i<$max; $i++)
                            {   
                                $proceso=$result->fields['proceso'];                        
                                $cedula=$result->fields['cedula'];
                                $numero_sol=$result->fields['numero_soli'];
                                $exp=$result->fields['exp'];
                                $razon = $result->fields['razon'];
                                if($exp == '-1')
                                {
                                    $aval = 'No avalado';
                                }
                                else
                                {
                                    $aval = 'Avalado';
                                }
                                //$aval2 = base64_encode($aval);
                                $cedula2=base64_encode($cedula);
                                $numero_sol2=base64_encode($numero_sol);
                                $proceso=base64_encode($proceso);
                                $exp=base64_encode($exp);
                                $link="<a href=\"evaluar.php?proceso=".$proceso."&exp=".$exp."&id=".$cedula2."&numero=".$numero_sol2."\" target='_blank'>Evaluar</a>";
                                $result->MoveNext();                                            
                                break;                                              
                            }
                            $data[$j]=array("cedula"=>$cedula,
                                            "numero"=> $numero_sol,
                                            "aval"=> $aval,
                                            "razon"=> $razon,
                                            "link"=>$link);
                            $j++;
                        } 
                        header('Content-type: application/json');
                        return json_encode($data);

It works perfectly but the PDF button I can't see it, I'll appreciate any help, thanks in advance

allan

Have you included the pdfmake library? It is required for the pdfHtml5 button type.

If that isn't the issue, please link to a test page showing the issue, per the forum rules.

Thanks,
Allan

gamn2090

Hi allan, My problem is that I'm working locally, and I don't have a domain to upload this and make it visible for u all , I'm doing my thesys to get my degree, so I'm trying to pull this off however I can, and I really like datatable, actually I had bad problems back then when I was trying to first make it work xD, but, I wasn't putting those librarys on my project, but still putting them there, is not showing the PDF I'm really sad about that >.<

here's my "improved" code >.<

head

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>

  <title>Coordinación Académica</title>
  <link rel="shortcut icon" href="../udo.ico" />

  <!-- CSS  -->
  <link rel="stylesheet" type="text/css" href="../css/jquery.dataTables.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="../css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="../css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link rel="stylesheet" href="../css/main.css">
  <link rel="stylesheet" href="../css/font.css">
  <link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
  <script src="../js/jquery.js"></script>
  <script type="text/javascript" language="javascript" src="../js/jquery.dataTables.js"></script>  
  <script src="../js/materialize.js"></script> 
  <script src="../js/init.js"></script>
  <script src="../js/vfs_fonts.js"></script>
  <script src="../js/buttons.html5.min.js"></script>
 <script src="../js/pdfmake.min.js"></script>    
</head>

Table with javascript >.<

<script type="text/javascript" class="init">
$(document).ready(function(){
    var datatable = $('#mytable').DataTable({
                     dom: 'Bfrtip',
                        buttons: [
                            {
                                extend: 'pdfHtml5',
                                customize: function ( doc ) {
                                    doc.content.splice( 1, 0, {
                                        margin: [ 0, 0, 0, 12 ],
                                        alignment: 'center',
                                       image: <--- too long to put
                                    } );
                                }
                            }
                        ],
                       "ajax": {
                        "url": "../procesos/motor_funciones.php",
                        "type": "POST",
                        "data" : {
                                "accion" : "mostrar_proceso_ret",   //nombre que recibe el switch    
                                }
                   },
                   "language": {
                                     "processing": "No hay registros en el histórico",
                                     "loadingRecords": " ",
                                     "lengthMenu": "Mostrando _MENU_ registros por página",
                                     "zeroRecords": "Nada econtrado - Perdón",
                                     "info": "Mostrando página _PAGE_ de _PAGES_",
                                     "infoEmpty": "No hay registros disponibles",
                                     "infoFiltered": "(filtrado de _MAX_ registros totales)" ,
                                     "search": "Búsqueda"                                             
                                  },
                    "sAjaxDataProp": "",
                    "processing": true,
                    //"pageLength": 20,
                   // "serverSide": true,
                     columns: 
                     [
                        {data:"cedula"},
                        {data:"numero"},
                        {data:"aval"},
                        {data:"razon"},
                        {data:"link"}                       
                      ]    
                         
                }); 
});
</script>
</head>
<body>
    <table id="mytable" class="display" style="text-align:center" cellspacing="0" width="100%">        
        <thead>
            <tr>
                <th>cédula</th>
                <th>Solicitud número</th>
                <th>aval</th>
                <th>razón</th>  
                <th>acción</th>               
            </tr>
        </thead>        
        <tfoot>
            <tr>
                <th>cédula</th>
                <th>Solicitud número</th>
                <th>aval</th>              
                <th>razón</th>  
                 <th>acción</th>               
            </tr>
        </tfoot>
    </table>

the motor_funciones, and mostrar_procesos functions, are still the same... If u could help I'd really appreciate it, like really really, I don't see the PDF button it shows in this: "https://datatables.net/extensions/buttons/examples/html5/pdfImage.html" example, I fon't know why...

gamn2090

and this is how I see the table, with no freaking PDF button >.<

gamn2090

I did it! ty for ur time anyways allan! now I'm trying to customize the PDF xD is harder than it looks

allan

Thanks for posting back - good to hear you've got it working.

Allan

gamn2090

Now, Can I disturb you a lil more? (and I don't mean go down with the sickness) do u have an example on HOW to customize the pdf, using the js script? I saw u had a image in your example, but I can't seem to put a local image file in there, and the pdfmake page is not helping me, that's why I ask u, ty in advance

MohammedEhab

You can images if they're in base64 format , you can convert them here http://dataurl.net/#dataurlmaker

gamn2090

Hi mohammed yes! ty very much for ur answer, now the only two things left, are, 1-. make the PDF table centered (it shows up at left) and 2.- delimitate how many and wich columns I want to put in the PDF, in other words, If i have 5 colums in my datatable; name, ID, date, reason and actions, I want to tell the PDFmak, hey you dont show the Actions column in the PDF , right now my js code for the datatable and pdf make looks like this:

$(document).ready(function() {
    $('#mytable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'pdfHtml5',  
               customize: function ( doc ) {
                    doc.content.splice( 1, 0, {
                        margin: [ 0, 0, 0, 12 ],
                        alignment: 'center',
                        image: <-- too damn long,
                                 width: 150,
                                 height: 150

                    } );
                }
            }
        ],
        
          "ajax": {
                        "url": "../procesos/motor_funciones.php",
                        "type": "POST",
                        "data" : {
                                "accion" : "mostrar_proceso_ret",   //nombre que recibe el switch    
                                }
                   },
                    "lengthMenu": [50],
                   "language": {
                                     "processing": "No hay registros en el histórico",
                                     "loadingRecords": " ",
                                     "lengthMenu": "Mostrando _MENU_ registros por página",
                                     "zeroRecords": "Nada econtrado - Perdón",
                                     "info": "Mostrando página _PAGE_ de _PAGES_",
                                     "infoEmpty": "No hay registros disponibles",
                                     "infoFiltered": "(filtrado de _MAX_ registros totales)" ,
                                     "search": "Búsqueda"                                             
                                  },
                    "sAjaxDataProp": "",
                    "processing": true,
                    //"pageLength": 20,
                   // "serverSide": true,
                     columns: 
                     [
                        {data:"cedula"},
                        {data:"numero"},
                        {data:"aval"},
                        {data:"razon"},
                        {data:"link"}                       
                      ]    
                         

    } );
} );
</script>

</head>
<body>
    <table id="mytable" class="display" style="text-align:center" cellspacing="0" width="100%">        
        <thead>
            <tr>
                <th>cédula</th>
                <th>Solicitud número</th>
                <th>aval</th>
                <th>razón</th>  
                <th>acción</th>               
            </tr>
        </thead>        
        <tfoot>
            <tr>
                <th>cédula</th>
                <th>Solicitud número</th>
                <th>aval</th>              
                <th>razón</th>  
                 <th>acción</th>               
            </tr>
        </tfoot>
    </table>

I putted the table too so u can see >.<

ty in advance!