Added buttons CSS and JS, but Print button does not appear

PayrollXL

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!

kthorngren

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 layout is used for this.

This doc page describes both of these steps.

Also see this BS 5 with buttons example.

Kevin

PayrollXL

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

allan

Hi Bob,

You can use the customize callback to completely control the generated page if you want. Example here.

Allan

PayrollXL

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!

kthorngren

See this example of how to choose exported columns. Probably the easiest way is to assign a class name to the th and use :not(.noExport) as the selector. You can assign it directly to the th HTML tag or use columns.className, for example:
https://live.datatables.net/zotimuro/1/edit

Kevin

PayrollXL

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

kthorngren

This example has some info. The print customize 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