0

I have a problem which I can't move data from next page if it is already exceed in the a4 size currently it will auto expand the container div and it did not create new page if data is full or exceed is there any idea or solution how to deal with this, I really appreciated any help

So this is my dummy code which I've assume to hava data in a dummy

<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

    const table2 = $('#tbl-box-a');

    if ($.fn.DataTable.isDataTable('#tbl-box-a')) {
        table2.DataTable().destroy();
    }

    dataTable2 = table2.DataTable({
        autoWidth: true,
        serverSide: false,
        columns: [
            { data: 'id' },
            { data: 'code' },
            { data: 'account_no' },
            { data: 'id_no' },
            { data: 'name' },
            { data: 'final_amount', charges: 'multiple_charges' },
            { data: 'purpose' },
            { data: 'dv_no', name: 'dv_no' },
            { data: 'multiple_charges' },
            { data: 'total', name: 'total' },
        ],
    });
  
/* Style for the container div with A4 paper size */
#container {
    width: 21cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* Style to make the table fit within the container */
#tbl-box-a {
    width: 100%;
}
/* Define page breaks */
@media print {
    #container {
        page-break-after: always;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataTables Example</title>
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Include DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
    
</head>
<body>

<!-- Container div with A4 paper size -->
<div id="container">
    <!-- Your table structure -->
    <table id="tbl-box-a" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Code</th>
                <th>Account No</th>
                <th>ID No</th>
                <th>Name</th>
                <th>Final Amount</th>
                <th>Purpose</th>
                <th>DV No</th>
                <th>Multiple Charges</th>
                <th>Total</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>ABC</td>
                <td>123456</td>
                <td>789</td>
                <td>John Doe</td>
                <td>$500.00</td>
                <td>Travel Expenses</td>
                <td>DV123</td>
                <td>Charge1, Charge2</td>
                <td>$1000.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="1"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="1"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
                        <tr>
                <td>2</td>
                <td>XYZ</td>
                <td>654321</td>
                <td>987</td>
                <td>Jane Smith</td>
                <td>$800.00</td>
                <td>Office Supplies</td>
                <td>DV456</td>
                <td>Charge3</td>
                <td>$1200.00</td>
                <td>
                    <a class="btn btn-sm btn-icon item-delete" id="2"><i class="text-primary ti ti-trash"></i></a>
                    <a class="btn btn-sm btn-icon item-amount" id="2"><i class="text-primary fa fa-edit"></i></a>
                </td>
            </tr>
            <!-- Add more rows as needed -->
        </tbody>
    </table>
</div>



</body>
</html>

Improve this question
9
  • Incidentally, it looks like you're loading jQuery twice, the number of table columns doesn't match the dataTable columns, and the serverSide option requires an ajax data source. Commented May 9, 2024 at 3:57
  • @showdev it just a dummy data, still I can't find the solution or idea how to condition if data exceeds Commented May 9, 2024 at 4:02
  • Do you mean you want to set the number of rows per page based on container height? Since A4 is a fixed size, you might consider setting a fixed number of rows per page with pageLength. Commented May 9, 2024 at 4:09
  • @pageLength I mean, let say the data in table exceeds or more than a page so it must automatically created another page so that the remaining data will reflect to the new page Commented May 9, 2024 at 5:08
  • 1
    @showdev there's no print here, normally in print media you just used page-break-always if data exceed in a4 it will automatically breaks the data to another page but it normal css html it doesn't work because it is nor print media now how am I going to do that? Commented May 11, 2024 at 1:35
Related questions
3550
pretty-print JSON using JavaScript
2762
How do I refresh a page using JavaScript?
2468
Get the size of the screen, current web page and browser window
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.