javascriptjqueryhtmldatatablesjquery-pagination

jQuery datatable doesn't print all the pages


I am using jQuery Datatable(jQuery version:jquery-3.1.1.min.js). I need to print all data in the tables(in my scenario I have 56 rows, 10 records per page then it becomes 6 pages).but it only prints some part of data(36 records). but I have pdf function also.it works fine. when hit pdf button it generate pdf with all the recodes

<script type="text/javascript" src="<c:url value='/static/js/jquery-3.1.1.min.js' />"></script>
<script src="<c:url value='/static/js/dataTables/jquery.dataTables.min.js' />"></script>
<script src="<c:url value='/static/js/dataTables/dataTables.buttons.min.js' />"></script>   
<script src="<c:url value='/static/js/dataTables/buttons.print.min.js' />"></script>


        <script>
            $(document).ready(function(){
                $('#adTable').DataTable({
                    dom: 'Bfrtip',
                    buttons: [
                         'pdf', 'print'
                    ]
                });
            });
        </script>



    <table id="adTable" class="table table-hover">
        <thead>
            <tr>
                <th>Index</th>
                <th>Subject</th>
                <th>Category</th>
                <th>Status</th>

            </tr>
        </thead>
        <tbody>
            <c:forEach var="obj" items="${list}" varStatus="loop">
                <tr>
                    <td>${loop.index+1}</td>
                    <td>${obj.subject}</td>
                    <td>${obj.category}</td>
                    <td>${obj.status}</td>
                </tr>
            </c:forEach>
        </tbody>
    </table>

Solution

  • I found the solution.the issue happens because of my CSS file. there is a css file that overrides my html body tag overflow-x

    my external css file looks like bellow

    body {
        padding: 0;
        margin: 0;
        height: 100%;
        min-height: 100%;
        font-family: 'Open Sans', sans-serif;
        color: #4f5f6f;
        overflow-x: hidden; }
    

    I changed to bellow.

    body {
        padding: 0;
        margin: 0;
        height: 100%;
        min-height: 100%;
        font-family: 'Open Sans', sans-serif;
        color: #4f5f6f;
        overflow-x: visible; }