How Export a table with js PDF and Filter incluided

25 views Asked by At

I have this users HTML table whit a input for filter and a button for to generate PDF document.

    <input type="text" id="filtrar_usuarios" onkeyup="filtrar_usuarios();">
    <button onclick="javascript:generar_PDF()">PDF</button>
    
<div id="net_users">
        <table id="users_table" >
                <thead>         
                <tr>
                    <th>Nº</th>
                    <th>NOMBRE</th>
                    <th>APELLIDO</th>
                    <th>NOTA</th>
                </tr>
            </thead>
            <tbody id="users">
                <tr>
                    <td>1</td>
                    <td>Andrea</td>
                    <td>Torres</td>
                    <td>Habilitada</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Gabriela</td>
                    <td>Cruz</td>
                    <td>Habilitada</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Claudia</td>
                    <td>Fernández</td>
                    <td>Nuevo</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Wendy</td>
                    <td>Pérez</td>
                    <td>Habilitada</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Jose</td>
                    <td>Luis</td>
                    <td>Habilitado</td>
                </tr>
            </tbody>

        </table> 
    </div>

This script is for filter the table

<script>
   
 function filtrar_usuarios(){

    var input, filter, table, tbody, tr, td, i;
    input = document.getElementById("filtrar_usuarios");
    filter = input.value.toUpperCase();
    tbody = document.getElementById("users");
    tr = tbody.getElementsByTagName("tr");
    for (var i = 0; i < tr.length; i++) {
    var tds = tr[i].getElementsByTagName("td");
    var flag = false;
    for(var j = 0; j < tds.length; j++){
    var td = tds[j];
    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    flag = true;
      } 
    }
    if(flag){
        tr[i].style.display = "";
    }
    else {
        tr[i].style.display = "none";
    }
  }
}

</script>

And this script for to export the table at PDF using jsPDF library

<script type="text/javascript">
        function generar_PDF() {
            var pdf = new jsPDF('l', 'pt', 'letter');
            source = $('#net_users')[0];
            specialElementHandlers = {            
                '#bypassme': function(element, renderer) {            
                    return true
                }
            };
            margins = {
                top: 80,
                bottom: 60,
                left: 40,
                width: 522
            };
            pdf.fromHTML(
                    source, 
                    margins.left, 
                    margins.top, {
                        'width': margins.width, 
                        'elementHandlers': specialElementHandlers
                    },
            function(dispose) {
                pdf.save('net_users.pdf');
            }
            , margins);
        }
    </script>

  </body>

When I apply the filter, the PDF generated display alls the table rows. That is to say, I apply the filter whit the "Habilitada" criteria, and the table display three rows, but when I generated the pdf, all the rows are in the document.

How to make for the PDF generated display the visible rows after the filter only?

Thank you.

0

There are 0 answers