title: Print window prints only the first page. No scroll visible on print preview in jQuery Datatables in angular 7
body: <p>I am using Jquery Datatable in angular 7 so as to open the table contents in Print Preview window as given in example
  <a href="https://datatables.net/extensions/buttons/examples/print/customisation.html" rel="nofollow noreferrer">Datatable</a>. I am able to get the data but when I click on Print button to open the print preview screen It opens but only first page is displayed as my table contains 50+ rows. The outer scroll is not visible as in the example <a href="https://datatables.net/extensions/buttons/examples/print/customisation.html" rel="nofollow noreferrer">Datatable</a>.</p>
  
  <pre><code> &lt;table id="tblDetails" class="stripe  responsive no-wrap" style="width:100%"&gt;
         &lt;thead&gt;
             &lt;tr&gt;
              &lt;th&gt;TRANSACTION DATE&lt;/th&gt;
              &lt;th&gt;DESCRIPTION&lt;/th&gt;
              &lt;th&gt;DEBIT&lt;/th&gt;
              &lt;th&gt;CREDIT&lt;/th&gt;
              &lt;th&gt;CURRENT BALANCE&lt;/th&gt;
              &lt;/tr&gt;
         &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>In My component.ts</p>
  
  <pre><code>
   $("#tblStatementDetails").DataTable({
        data: this.statementDetails,
        retrieve: true,
        border: false,
        className: "",
        orderClasses: false,
        responsive: true,
        scrollX: true,
        paging: false,
        dom: "Bfrtip",
        buttons: [
          {
            extend: "print",
            title: "",
            customize: function (win) {
              debugger;
  
  
              $(win.document.body)
                .find("table").addClass('compact');
  
            }
          }
        ],
  
        columns: [
          { data: "dtCaptureDate", className: "text-center ", width: "7%", border: "none", color: "#8a807f !important", },
          { data: "szTransactionDescription", className: "text-center", width: "15%", border: "none", color: "#8a807f !important" },
          { data: "Debits", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
          { data: "Credits", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
          { data: "szRedCapital", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
        ]
      });
  </code></pre>
  
  <p>in my angular.json</p>
  
  <pre><code>"src/assets/datatable/js/jquery.dataTables.min.js",
  "src/assets/datatable/js/dataTables.buttons.min.js",
  "src/assets/datatable/js/buttons.flash.min.js",
  "src/assets/datatable/js/jszip.min.js",
  "src/assets/datatable/js/pdfmake.min.js",
  "src/assets/datatable/js/vfs_fonts.js",
  "src/assets/datatable/js/buttons.html5.min.js",
  "src/assets/datatable/js/buttons.print.min.js"
  </code></pre>
  
  <p>In index.html I have added </p>
  
  <pre><code>  &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" /&gt;
  
    &lt;link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" /&gt;
  </code></pre>