Datatable + PDF

gamn2090 · October 2016

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 · October 2016

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 · October 2016

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 · October 2016

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

gamn2090 · October 2016

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

allan · October 2016

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

Allan

gamn2090 · October 2016

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 · October 2016

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

gamn2090 · October 2016

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!

Datatable + PDF

Datatable + PDF

Answers

Howdy, Stranger!

Categories

DataTables

Datatable + PDF

Datatable + PDF

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables