How do I add a working window(print) function to just an html table that has data from a json file?

[RealImmortal2004]

I've tried googling how to do this but I can't find any useful results. The code below is what I want to print. I want it to be able to print whatever is in the table and I want to be able to print certain things based on filtering. How can I print the table without having to create a linked file every time I need to print it?

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
    @import url("https://fonts.cdnfonts.com/css/satoshi");
    table {
        border-collapse: collapse;
        width: 100%;
        margin-top: 5px;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
        background-color: white;
        font-size: 0.7em;
        border-radius: 6px;
    }

    thead {
        position: sticky;
        top: 0;
        background-color: #fff;
    }

    th,
    td {
        padding: 8px;
        text-align: left;
        color: #888888;
    }
    .input-icon {
        position: absolute;
        left: 3px;
        top: calc(
            50% - 0.5em
        ); /* Keep icon in center of input, regardless of the input height */
    }
    input {
        padding-left: 17px;
    }
    .input-wrapper {
        position: relative;
    }
</style>
<link
    href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
    rel="stylesheet"
/>
<div class="input-wrapper">
    <input type="text" id="filter" placeholder="Filter/Search data" />
    <label for="filter" class="fa fa-filter input-icon"></label>
    <button type="button" id="btnFilter">Go</button>
</div>
<table id="table">
    <tr>
        <th style="font-weight: 500; color: black">Date</th>
        <th style="font-weight: 500; color: black">Time</th>
        <th style="font-weight: 500; color: black">Status</th>
        <th style="font-weight: 500; color: black">Program</th>
    </tr>
</table>
<script>
                    $(document).ready(function () {
                        $.getJSON("aimeepelletiersubmitattendance.json",
                                function (data) {
                            var student = '';
                            $.each(data, function (key, value) {

                  student += '<tbody>';
                                student += '<tr>';
                                student += '<td>' +
                                    value.Date + '</td>';

                                student += '<td>' +
                                    value.Time + '</td>';

                                student += '<td>' +
                                    value.Status + '</td>';

                  student += '<td>' +
                                    value.Program + '</td>';

                                student += '</tr>';
                  student += '</tbody>';
                            });

                            $('#table').append(student);
                        });
                    });
              $(document).ready(function() {
        $("#btnFilter").click(function() {
            $("#table tbody tr").show();
            if($("#filter").val.length > 0) {
                $("#table tbody tr").filter(function(index, elm) {
                    return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
                }).hide();
            }
        });
    });
</script>

 

[Antero360]

Hi there,

in order to use the print functionality, you would need to call the .print() function

function printData()
{
   //get the table from DOM
   var data=document.getElementById("yourTable");

   //open a new window
   var newWindow= window.open("");

   //write content to new window
   newWindow.document.write(data.outerHTML);

   //open print GUI
   newWin.print();
   newWin.close();
}

$('button').on('click',function(){
printData();
})

For references:
A simple "js print html table" search on google, lead to this being the #1 result, from StackOverflow,

How to print table using Javascript?

I found this code to print in Javascript. function printData() { var divToPrint=document.getElementById("printTable"); newWin= window.open(""); newWin.document.write(divToPrint.outerHTML)...

stackoverflow.com

which best answer had its own jsFiddle demo for you to take a look at 🙂

jsFiddle

Print Table - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net