Added buttons CSS and JS, but Print button does not appear
Added buttons CSS and JS, but Print button does not appear
PayrollXL
Posts: 6Questions: 2Answers: 1
I have DataTables working in my Django project and all of the functionality works fine. Now, I am trying to use the **buttons **extension to include a "print" button. My JQuery is set as follows...
<script type="text/javascript">
$(document).ready(function () {
$('#setupTable').DataTable({
'buttons': ['print']
});
});
</script>
The header section of my code includes the following...
<script src="https://cdn.datatables.net/2.3.2/js/dataTables.min.js"
integrity="sha384-RZEqG156bBQSxYY9lwjUz/nKVkqYj/QNK9dEjjyJ/EVTO7ndWwk6ZWEkvaKdRm/U"
crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/2.3.2/js/dataTables.bootstrap5.min.js"
integrity="sha384-G85lmdZCo2WkHaZ8U1ZceHekzKcg37sFrs4St2+u/r2UtfvSDQmQrkMsEx4Cgv/W"
crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/buttons/3.2.3/js/dataTables.buttons.min.js"
integrity="sha384-zlMvVlfnPFKXDpBlp4qbwVDBLGTxbedBY2ZetEqwXrfWm+DHPvVJ1ZX7xQIBn4bU"
crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/buttons/3.2.3/js/buttons.bootstrap5.min.js"
integrity="sha384-BdedgzbgcQH1hGtNWLD56fSa7LYUCzyRMuDzgr5+9etd1/W7eT0kHDrsADMmx60k"
crossorigin="anonymous"></script>
The functionality of the datatable still works (paging, searching, sorting, etc.), however no print button appears. I have watched a few videos to see if I'm doing it correctly, and it seems that I am.
Can anyone offer some advice on what might be wrong here?
Thanks!
This question has accepted answers - jump to:
Answers
There are two issues:
First is you aren't loading
buttons.print.js. Use the Download Builder to obtain all the correct include files for the extensions being used.Second is you haven't defined the code to insert the buttons into the document. Typically
layoutis used for this.This doc page describes both of these steps.
Also see this BS 5 with buttons example.
Kevin
Thanks Kevin,
That did the trick! I was missing the layout **option, and I realized that in the Download builder I didn't select the **Print View option. It's working now!
Another question. Is there any documentation on how the previewed report can be formatted (i.e. headings, alignment, etc.) or is this dependent on the HTML table structure?
Thanks!
Bob
Hi Bob,
You can use the
customizecallback to completely control the generated page if you want. Example here.Allan
Okay, thanks Allan, that was helpful to get me started with the formatting of the output.
One last question (for today
), is there a way to eliminate a column just for the print option? For example, in the view/table the first column has buttons to [Edit] and [Delete] but I don't want that column in the print/preview.
Thanks!
See this example of how to choose exported columns. Probably the easiest way is to assign a class name to the
thand use:not(.noExport)as the selector. You can assign it directly to thethHTML tag or usecolumns.className, for example:https://live.datatables.net/zotimuro/1/edit
Kevin
Thanks Kevin. The example using the class name worked like a charm! I'm making very good progress with this, but one thing I noticed is that the formatting for the hard-copy in terms of column spacing seems to be missing. For example, this is the table view in the browser...
However, this is what the preview looks like...
Do I need to look deeper into the formatting options in JQuery? Is there an area where this is documented?
Thanks again for all of your help!
Bob
This example has some info. The
printcustomize docs are here.Its hard to tell from your screenshot why there doesn't seem to be spacing between the columns. The widths seem to be ok in this example. Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin