Print button only prints 1 page

stweeet

Hello guys

I just tried out the button plugin, but when i use the print button print preview only shows 1/1 page, tho there should be more pages.
(only some of the rows comes on)

allan

Happy to take a look if you link to the page showing the issue.

Allan

david.opsahl

I am having a similar issue. Sadly, I cannot provide a link to the page. What else could I provide?

kthorngren

If you are using server side process then see this FAQ.

If not then looking at your code is needed to start troubleshooting.

Kevin

david.opsahl

Thanks, Kevin. I am not using server side. Below is my code. BTW, my data source is a SharePoint 2013 list. tia.

<link rel="stylesheet" type="text/css" href="/sites/IST/Scripts/jquery.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="/sites/IST/Scripts/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="/sites/IST/Scripts/buttons.jqueryui.css"/>
<link rel="stylesheet" type="text/css" href="/sites/IST/Scripts/colReorder.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="/sites/IST/Scripts/datatables.jqueryui.css"/>
<link rel="stylesheet" type="text/css" href="/sites/IST/Scripts/jquery-ui-cuper.css"/>
<link rel="stylesheet" type="text/css" href="/sites/IST/Scripts/Studies1.css"/>

<script type="text/javascript" src="/sites/IST/Scripts/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/buttons.html5.min.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/buttons.jqueryui.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/buttons.print.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/dataTables.colReorder.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/datatables.jqueryui.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/jszip.min.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/pdfmake.min.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/vfs_fonts.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/jquery-ui-cuper.js"></script>
<script type="text/javascript" src="/sites/IST/Scripts/moment-with-locales.js"></script>

<script type="text/javascript">

  $(document).ready(function () {

    var queryDay = moment().format();
    var queryDefaultDay = moment().subtract(5, 'days').format();
    var xQuery = _spPageContextInfo.webAbsoluteUrl  + "/_api/web/lists/GetByTitle('IST%20Documents%20Status')/items?$select=Document_x0020_Name, Document_x0020_Link, Document_x0020_Create_x0020_Date&$top=5000&$OrderBy=Document_x0020_Create_x0020_Date desc";
    
    var TOC = "<table width='350px' border='0'><tr><td colspan='3' class='aNav14B'>Document Date Range</td></tr>";
    TOC += "<tr><td class='aNav12' colspan='3'><input type='radio' name='showdays' value='5' id='5' checked='checked' />5 Days (default)</td></tr>";
    TOC += "<td class='aNav12' colspan='3'><input type='radio' name='showdays' value='14' id='14' />14 Days</td></tr>";
    TOC += "<tr><td class='aNav12B' valign='bottom'>Start Date</td><td class='aNav12B' valign='bottom'>End Date</td></tr>";
    TOC += "<tr><td width='150px' valign='top'><input type='text' id='startdate'></td><td width='150px' valign='top'><input type='text' id='enddate'></td><td width='50px' valign='top'><div id='getRange' class='link-button-wrapper'>Search...</div></td></tr>";  
    
    var TOCInfo = "<table width='600px'><tr><td class='aNav'>The Document Date Range section allows for quick display of uploaded documents.</td></tr>";
    TOCInfo += "<tr><td class='aNav'>By default, the Document List displays documents that have been uploaded in the last 5 days.</td></tr>";   
    TOCInfo += "<tr><td class='aNav'>Click the 14 Days radio button to see documents that have been uploaded in the last 14 days.</td></tr>";
    TOCInfo += "<tr><td class='aNav'>Use the Start Date and End Date fields to search for documents uploaded earlier than 14 days ago.</td></tr>";  
    TOCInfo += "<tr><td class='aNav'><strong>NOTE:</strong> The document list contains AT MOST 2 months of documents. If you select a date range more than 2 months ago, you may not return any results.</td></tr>";    
    TOCInfo += "<tr><td>&nbsp;</td></tr>";

    $("#toc").html(TOC + "</table>");
    $("#tocInfo").html(TOCInfo + "</table>");   

    $("#errMsg").val("");   
    makeTable(xQuery, queryDay, queryDefaultDay);
    
    $( function() {
      $("#startdate").datepicker();
      if ($("#enddate").val() < $("#startdate").val()) {
        $("#errMsg").show();
      }
    });
    
    $( function() {
      $("#enddate").datepicker();
      if ($("#startdate").val() > $("#enddate").val()) {
        $("#errMsg").show();
      }   
    }); 
    
    $( function() {
      $("input[type='radio']").checkboxradio();
    });
    
    $("#14").click(function() {
      $("#errMsg").hide();  
      $("#startdate").val("");
      $("#enddate").val("");
      var zDefaultDay = moment().subtract(14, 'days').format();
      makeTable(xQuery, queryDay, zDefaultDay);
    });
    
    $("#5").click(function() {
      $("#errMsg").val(""); 
      $("#startdate").val("");
      $("#enddate").val("");    
      makeTable(xQuery,queryDay, queryDefaultDay);
    }); 

    $( "#getRange" ).click( function() {
        if ($("#startdate").val() == '' && $("#enddate").val() == '') {
          alert("Both of the date fields MUST contain a value.");
          return;
        }
        if ($("#startdate").val() == '') {
          alert("The Start date field MUST contain a value.");
          return;         
        }
        if ($("#enddate").val() == '') {
          alert("The End date field MUST contain a value.");
          return;
        }       
        if ($("#startdate").val() != '' && $("#enddate").val() != '') {
          var Date1 = moment($("#startdate").val()).format();
          var Date2 = moment($("#enddate").val()).format();
          var arrDate = Date1.split("T");
          Date1 = arrDate[0] + "T00:00:00";
          arrDate = Date2.split("T");     
          Date2 = arrDate[0] + "T23:59:59";   
          makeTable(xQuery, Date2, Date1);
        }
    });
    function makeTable(xURL, xDay, xDefaultDay) {

        var yURL = xURL + "&$filter=(Document_x0020_Create_x0020_Date ge datetime'" + xDefaultDay + "') and (Document_x0020_Create_x0020_Date le datetime'" + xDay + "')";
    
        var call = $.ajax({
            url: yURL,
            type: "GET",
            dataType: "json",
            headers: { Accept: "application/json;odata=verbose" }
        }); 
        
        call.done(function (data,textStatus, jqXHR){
           var myTable = $("#doctable").DataTable({
               "destroy": true,
               "order": [[ 2, "desc" ]],
               "processing": true,
               "lengthMenu": [[25,50,75,100,-1],[25,50,75,100,"All"]],
               "pageLength": 25,
               "colReorder": true,     
               "dom": 'Blfrtip',
               "deferRender": true,
               "buttons": [
                   'excel',
                   'print'
               ],
               "data": data.d.results,
               "columns": [
                   { "data": "Document_x0020_Link",
                        render: function (data, type, full, meta) {
                             return '<a href="' + data + '">Link</a>';
                        }
                   },          
                   { "data": "Document_x0020_Name" },
                   { "data": "Document_x0020_Create_x0020_Date" ,
                        render: function ( data, type, row ) {
                          if (data != null){
                             return (moment(data).format("MM/DD/YYYY"));
                          }
                          else {
                            return ("");
                          }
                        }
                   },
                   { "data": "Document_x0020_Link" }
               ]
          });
        });

        call.fail(function (jqXHR,textStatus,errorThrown){
          alert("Error retrieving Tasks: " + jqXHR.responseText);
        });
    }
  });
</script>

<div id="toc"><img class="cape-weather-loading" src="/SiteAssets/Scripts/TrafficAndWeather/img/horizontal_loading.gif" unselectable="on" alt=""/></div>
<div id="tocInfo"></div>
<div id="errMsg"></div>
<table width="300px">
 <tr>
  <td class="aNav16B">Document List</td>
  <td>&nbsp;</td>
 </tr>
</table>
<div id="DTable" style="width:100%">
    <table cellpadding="0" cellspacing="0" border="0" class="display compact stripe" id="doctable">
      <thead>
       <tr>
         <th style="text-align:left; width: 50px; vertical-align:top">Link</th>
         <th style="text-align:left; width: 320px; vertical-align:top">Name</th>
         <th style="text-align:left; width: 140px; vertical-align:top">Upload Date</th>
         <th style="text-align:left; vertical-align:top">URL</th>        
       </tr>
      </thead>
    </table>
</div>

david.opsahl

OK, that didn't turn out like expected...let me try again...

allan

You just needed to use back ticks rather than quote marks for the code highlighting. I'ved edited it now.

How many rows of data are there in data.d.results? Your default view for the DataTable is 25 records - are you saying that even if you have more than 25 records in the results object, only 25 are shown in the print?

Allan

david.opsahl

Hi Allen,

Thanks.
It doesn't appear to matter what value I select for the pageLength and, therefore; the number of displayed rows.
When I click the PRINT button, I see all the records that are returned based upon the search criteria. For example, the default is to return the last 5 days worth of files from the list. Currently, that is 77 records. When I click the PRINT button, I see all 77 records. BUT, when I print, only 1 page worth of items are printed. In this case, 17 records. (The # of items changes based upon the length of the Document Link value and the wrapping of the text.) Also, if I "print" to Adobe PDF, I only get 1 page worth of items.

I took the example from the web site where the table values are hard coded in the html page and added the same Links to css files and loading the same js libraries as above and I was able to display the table as wanted and the PRINT button worked as advertised, all pages printed. Also, I was able to display the PDF button and have it work as advertised. The PDF button does not work with my example, but not an issue at this point. So, I am wondering if returning the data via a REST statement makes a difference.

thanks again,

David

allan

Hi David,

It shouldn't. As Kevin mentioned above server-side processing will effect the export options, but you aren't using server-side processing from the above code, so there shouldn't be a problem.

This example Ajax loads the data, and you'll be able to see there that all of the rows are included in the exported files.

Allan

manueldenoviembre

The issue is a css trouble

@media print {
body
{
border-top: hidden;
width: 100%;
height: auto;
}
}