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

Question

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.

I am using Print.js plugin for printing page. I am not able to css files in that plugin. — Beta
– Beta, Commented Apr 23, 2018 at 5:21

Anfath Hifans · Accepted Answer · 2018-04-23 07:18:51Z

1

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/

answered Apr 23, 2018 at 7:18

Anfath Hifans

1,5981 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ankur Makadia · Accepted Answer · 2018-04-23 05:07:53Z

0

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>

answered Apr 23, 2018 at 5:07

Ankur Makadia

171 silver badge5 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related