Print Button does not show records in Chrome

puffster

DataTables is incredible!! I keep finding new features that make me fall in love all over again. The most recent are the Buttons extensions...I'm working on implementing Copy, Excel, PDF, and Print. The first three are working with no issues, but Print is giving me problems. When trying to print in Chrome, if I click the Print button, the new tab opens up and I can see that the table is getting fully populated before being covered by the print preview. The print preview only shows the title of the page and does not show the datatable at all.

I work for a school system and this particular page is public, so it can be viewed here:

https://assessment.jefferson.kyschools.us/DMC/BM/SSP

It will default to the 2017-18 school year, so near the top left-hand corner select the 2016-17 school year to see data. Any ideas as to what I'm doing wrong with the printing?

Rob Brun

Hi puffster,

Yours is like this

 {
      extend: 'print',
       exportOptions: {
            columns: [1, 2, 3, 4, 5, 6, 7]
          }
}

Maybe play around with it like this.

                {
                   
                     extend: 'print',
                     footer: 'true',
                     title: "Title of your print",
                     customize: function (win) {
                         $(win.document.body)
                             .css('font-size', '6pt');

                         $(win.document.body).find('table')
                             .addClass('compact')
                             .css('font-size', 'inherit');
                     }
                 },

puffster

Rob!!

Thanks for the quick response! Unfortunately, it did not solve the problem. I can see that your suggested changes took place when the table is recreated, but it still shows just the Title in print preview. I took some screen shots to show what the regenerated table looks like, not sure if it will help but it can't hurt

allan

That's odd! Could you add autoPrint: false to your initialisation for the button? Will be interesting to see if it can be printed manually after a short time.

Allan

allan

p.s. Thanks for your kind words

Rob Brun

hmmmm

puffster

I added the autoPrint: false and no change.

So here's what my initialization looks like currently:

var sumTable = $('#tblSSP').DataTable({
    info: false,
    paging: false,
    sort: false,
    dom: 'fBrt',
    buttons: [
        {
            extend: 'copyHtml5',
            exportOptions: {
                columns: [1, 2, 3, 4, 5, 6, 7]
            }
        },
        {
            extend: 'excelHtml5',
            exportOptions: {
                columns: [1, 2, 3, 4, 5, 6, 7]
            }
        },
        {
            extend: 'pdfHtml5',
            exportOptions: {
                columns: [1, 2, 3, 4, 5, 6, 7]
            }
        },
        {
            extend: 'print',
            footer: 'true',
            title: "Title of your print",
            autoPrint: 'false', 
            customize: function (win) {
                $(win.document.body)
                    .css('font-size', '6pt');

                $(win.document.body).find('table')
                    .addClass('compact')
                    .css('font-size', 'inherit');
            }
        }
    ],
    scrollY: 525,
    scrollX: true
    })

And here's what my rendered html dataTable is looking like (as copied from Google Chrome):

<div style="margin-top: 50px; width: 80%; margin-right: auto; margin-left: auto;">
            <div id="tblSSP_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div id="tblSSP_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control input-sm" placeholder="" aria-controls="tblSSP"></label></div><div class="dt-buttons btn-group"><a class="btn btn-default buttons-copy buttons-html5" tabindex="0" aria-controls="tblSSP" href="#"><span>Copy</span></a><a class="btn btn-default buttons-excel buttons-html5" tabindex="0" aria-controls="tblSSP" href="#"><span>Excel</span></a><a class="btn btn-default buttons-pdf buttons-html5" tabindex="0" aria-controls="tblSSP" href="#"><span>PDF</span></a><a class="btn btn-default buttons-print" tabindex="0" aria-controls="tblSSP" href="#"><span>Print</span></a></div><div class="dataTables_scroll"><div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px; width: 100%;"><div class="dataTables_scrollHeadInner" style="box-sizing: content-box; width: 1221px; padding-right: 17px;"><table class="table table-striped table-bordered display nowrap dataTable no-footer" style="border: 1px solid burlywood; margin-left: 0px; width: 1221px;" role="grid"><thead>
                    <tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 130px;">School Details</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 67px;">District</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 134px;">Board Member</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 128px;">School Level</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 135px;"># Suspensions</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 138px;">Black SSP Rate</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 143px;">White SSP Rate</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 208px;">Disproportionality Gap</th><th hidden="hidden" class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px;"></th></tr>
                </thead></table></div></div><div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%; height: 525px;"><table id="tblSSP" class="table table-striped table-bordered display nowrap dataTable no-footer" style="border: 1px solid burlywood; width: 1219px;" role="grid"><thead>
                    <tr role="row" style="height: 0px;"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 130px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">School Details</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 67px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">District</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 134px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Board Member</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 128px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">School Level</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 135px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;"># Suspensions</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 138px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Black SSP Rate</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 143px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">White SSP Rate</div></th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 208px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;">Disproportionality Gap</div></th><th hidden="hidden" class="sorting_disabled" rowspan="1" colspan="1" style="width: 0px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;"><div class="dataTables_sizing" style="height:0;overflow:hidden;"></div></th></tr>
                </thead>
                
                <tbody><tr role="row" class="odd"><td class="cumulative-details-control openClose"></td><td class="text-center fontBoldCentered">All</td><td class="fontBoldLeft">All</td><td>High School</td><td class="text-center ">10,103</td><td class="text-center ">29.2%</td><td class="text-center ">16.0%</td><td class="text-center ">-13.2%</td><td hidden="">All High School</td></tr><tr role="row" class="even"><td></td><td class="text-center fontBoldCentered"></td><td class="fontBoldLeft"></td><td>Middle School</td><td class="text-center ">8,481</td><td class="text-center ">32.1%</td><td class="text-center ">12.6%</td><td class="text-center ">-19.5%</td><td hidden="">All Middle School</td></tr><tr role="row" class="odd"><td></td><td class="text-center fontBoldCentered"></td><td class="fontBoldLeft"></td><td>Elementary School</td><td class="text-center ">3,180</td><td class="text-center ">7.6%</td><td class="text-center ">2.8%</td><td class="text-center ">-4.8%</td><td hidden="">All Elementary School</td></tr><tr role="row" class="even"><td></td><td class="text-center fontBoldCentered"></td><td class="fontBoldLeft"></td><td class="fontBoldRight">Totals</td><td class="text-center totalsHighlight">21,764</td><td class="text-center totalsHighlight">17.0%</td><td class="text-center totalsHighlight">7.5%</td><td class="text-center totalsHighlight">-9.5%</td><td hidden="">All Totals</td></tr><tr role="row" class="odd"><td class="cumulative-details-control openClose"></td><td class="text-center fontBoldCentered">1</td><td class="fontBoldLeft">Diane Porter</td><td>High School</td><td class="text-center ">1,123</td><td class="text-center ">11.1%</td><td class="text-center ">6.7%</td><td class="text-center ">-4.4%</td><td hidden="">Diane Porter High School</td></tr><tr role="row" class="even"><td></td><td class="text-center fontBoldCentered"></td><td class="fontBoldLeft"></td><td>Middle School</td><td class="text-center ">929</td><td class="text-center ">15.3%</td><td class="text-center ">3.0%</td><td class="text-center ">-12.3%</td><td hidden="">Diane Porter Middle School</td></tr><tr role="row" class="odd"><td></td><td class="text-center fontBoldCentered"></td><td class="fontBoldLeft"></td><td>Elementary School</td><td class="text-center ">1,267</td><td class="text-center ">10.5%</td><td class="text-center ">3.0%</td><td class="text-center ">-7.5%</td><td hidden="">Diane Porter Elementary School</td></tr><tr role="row" class="even"><td></td><td class="text-center fontBoldCentered"></td><td class="fontBoldLeft"></td><td class="fontBoldRight">Totals</td><td class="text-center totalsHighlight">3,319</td><td class="text-center totalsHighlight">11.9%</td><td class="text-center totalsHighlight">3.8%</td><td class="text-center totalsHighlight">-8.1%</td><td hidden="">Diane Porter Totals</td></tr></tbody>
    </table></div></div></div>
</div>

puffster

Update -- it's NOT a DataTables issue (but I'm sure you knew that already

I've continued to test and discovered that NOTHING on my website wants to print. I went to the home page and several other pages that do not have DataTables, and if I right-click and select Print... the same thing happens -- it just pulls up the Title of the web page but no other content. If you get bored, give it a try:

https://assessment.jefferson.kyschools.us/DMC/

Have you ever seen anything like this? Is there a simple "Print/Don't Print" web setting that I just don't know about? I know I can't be that lucky...

tangerine

Have you googled "Chrome not printing"?

puffster

I've been using Chrome to test with, but have verified that it is this way for all browsers...so it's definitely my website, but I have no clue what I could have done. I designed it using Visual Studio 2010 and have recently exported it into Visual Studio 2015. I'm trying to use as litlle asp.net as possible though and trying to stick mostly to html5, jquery, and bootstrap.

tangerine

"The server at assessment.jefferson.kyschools.us is taking too long to respond."

Several attempts have resulted in the same message.

puffster

Well this is embarrassing, but I found the problem. Apparently at some point during development I included a css script in the master page, which included this little gem:

@media print { 
    body  
    {
        visibility: hidden;
        border-top: hidden;
        width: 50%;
    }

    .noPrint
    {
        display: none !important;
    }

    ol
    {
        display: none;
    }

    .printSection, .printSection *
    {
        visibility: visible;
        margin: 1px;
        padding: 1px;
    }

    .printSection
    {
        position: relative;
        left: 0;
        top: 0;
    }
}

I removed it and DataTables print is working like a dream! Really sorry to take up everybody's time, but thanks for all the suggestions.

allan

Heh - easy done. Well found! That could have been a nightmare to find.

Thanks for the update

Allan

jvcunha

Try this solution: found this thread