CODEWITHSUNDEEP
javascriptjquery
Beta
Beta

Reputation: 7

how to use html table in jQuery for printing values from the html table

This is my footer in javascript.

$("").printThis({
     footer: " "+$("#table").text()+" <br><h4>Total in Words : 
     "+$("#txtWord").text()+"</h4>"
});

this is my table

<div id="table">
    <div class="col-sm-12">

        <table id="tabledata" width="500" style="font-family: arial; text-align: center;border-collapse: collapse;  border: 0.1px solid black;padding: 7px; display: none;">
            <thead>
                <tr>
                    <th>Sl.No</th>
                    <th>Emp Name</th>
                    <th>Emp ID</th>
                    <th>Emp Gender</th>
                    <th>Emp Salary</th>
                </tr>
            </thead>

       </table>
   </div>

I am printing this table in my print page. I want to print this table using jQuery footer. but not able to get that values. that just printing the values as

Sl.No Emp Name Emp ID Emp Gender Emp Salary 910/02/201863TOTAL63=00

This is the output from the print page that I was printing. Anyone knows how to print please tell me. Thanks in advance.

Upvotes: 0

Views: 2308

Answers (2)

Anfath Hifans
Anfath Hifans

Reputation: 1598

If your table visible, you can simply add footer: $("#table"), but here, your table not hidden.

So, first, we need to add visible to the table before pass the data

$(function(){    
    $('').printThis({
        debug: false,        
        footer: $("#table").clone().children().find('table').css('display','block').get(0),
    });
});

working example : https://jsfiddle.net/kk35mcnx/1/

Upvotes: 1

Ankur Makadia
Ankur Makadia

Reputation: 17

You can use http://www.w3.org/TR/CSS21/media.html

You can realize that through popup window - in this window show only table and send it to printer.

Simple example

<script>
    function printDiv() {
        var divToPrint = document.getElementById('areaToPrint');
        newWin = window.open("");
        newWin.document.write(divToPrint.outerHTML);
        newWin.print();
        newWin.close();
   }
</script>

Upvotes: 0

Related Questions