Datatable

with print and download button

by dhaileytaha

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://parall.ax/parallax/js/jspdf.js"></script>
<button id="btnPrint" style="cursor:pointer">Print <i class="glyphicon glyphicon-print"></i></button>    
<button id="cmd" style="cursor:pointer">Download <i class="glyphicon glyphicon-print"></i></button>
                        
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Mobile</th>
                <th>Interest</th>
                <th>Address</th>
                <th>Prospect</th>
                <th>Reference</th>
                <th>Sales Person</th>
                <th>Visit</th>
                <th>Gender</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Mobile</th>
                <th>Interest</th>
                <th>Address</th>
                <th>Prospect</th>
                <th>Reference</th>
                <th>Sales Person</th>
                <th>Visit</th>
                <th>Gender</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td><a href="#"> Taha </a></td>
                <td>87867856756</td>
                <td>1 month</td>
                <td>AAAJKADJkd</td>
                <td>Sales</td>
                <td>Warm</td>
                <td>SMS</td>
                <td>2016-09-07</td>
                <td>Male</td>
            </tr>
            <tr>
                <td><a href="#"> Taha </a></td>
                <td>87867856756</td>
                <td>1 month</td>
                <td>AAAJKADJkd</td>
                <td>Sales</td>
                <td>Warm</td>
                <td>SMS</td>
               ...

JavaScript

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

document.getElementById("btnPrint").onclick = function () {
    var password;

        var pass1="cool";

    password=prompt('Please enter your password to view this page!',' ');

    if (password==pass1)
    { 
      printElement(document.getElementById("printThis"));
//console.log(elem);
    }
}
//console.log(elem);
function printElement(elem) {
    var domClone = elem.cloneNode(true);
    console.log(elem);
    var $printSection = document.getElementById("printSection");
    
    if (!$printSection) {
        $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }
    
    $printSection.innerHTML = "";
    $printSection.appendChild(domClone);
    window.print();
}


/*Download option*/
var doc = new jsPDF();
        var specialElementHandlers = { 
     '#editor': function (element, renderer) {
            return true;
        }
        };
              doc.fromHTML($('#example').html(), 55, 55, {
            'width': 170,
        'elementHandlers': specialElementHandlers
        });
    ...