Print button outside table using html tag button

Print button outside table using html tag button

michelmirmichelmir Posts: 16Questions: 7Answers: 0

Hello.

I would like to know how can i print data table click on button tag included in a div? I found some question about it but i didn't get the correctly way to solve this. Below are the questions that i'm talk about:

https://datatables.net/extensions/buttons/custom
https://datatables.net/forums/discussion/40673/print-all-table-on-single-print-button
https://datatables.net/extensions/buttons/examples/print/simple

Below i'm showing the part of code that display data:


<div class="col"> <button type="button" id="print" class="btn btn-light btn-block border">Print</button> </div> <div class="table-responsive"> <br> <table id="user_data" class="table table-bordered"> <thead align="center"> <tr> <th width="5%">id</th> <th width="5%">First name</th> <th width="5%">Last Name</th> <th width="5%">Address</th> </tr> </thead> </table> </div> </div> var dataTable = $('#user_data').DataTable({ "processing":true, "serverSide":true, "order":[], "ajax":{ url:"script.php", type:"POST" },   "dom": 'Bfrtip',         "buttons": [ 'print'         ], }); <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>

The code above works perfectly but i don't know what code line inside Datatable code that i have to use to print data with one click on button.

Thanks :)

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    to print data with one click on button.

    Not sure if I understand the question. I will answer what I think your question is. IS the question that you can only print one page at a time? If so please see this FAQ. If not please provide more info regarding the issue.

    Kevin

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    Print button outside table using html tag button

    Maybe your question is how to place the Print button on the page where you want. The Direct Insertion Install doc should help.

    Kevin

  • michelmirmichelmir Posts: 16Questions: 7Answers: 0

    Hello Kevin. Thanks for feedback.

    If is possible i need to create a html button <button></button> outside table that call print event that print table data with column and rows. In this case i think i need to use "initComplete": function() {} to do this but i don't know how :/

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734
    edited December 2019 Answer ✓

    You can create a button and in the button's click event use button().trigger() to trigger the print button.

    Kevin

  • michelmirmichelmir Posts: 16Questions: 7Answers: 0

    Hello Kevin. Thanks for your feedback. I followed your tip and i was able to solve the problem with the code below:

        $("#printButton").on("click", function() {
        table.button( '.buttons-print' ).trigger();
    });
    
    

    Thanks :)

  • jahidulalammishukjahidulalammishuk Posts: 1Questions: 0Answers: 0

    thanks ;)

Sign In or Register to comment.