How to allow table have pagination to display default value 10 rows ?

See more:

Razor

ASP.NET-Core

I work on razor asp.net core I need to allow datatable to have paginations options drop down with 5,10,15,20,25

so when load data it must display default rows per page as 10 rows as first page

if i need to increase it to 10 or 15 etc it will accept change according to drop down selection

i try to do it but default value for first page not working

as

example first page have 15 rows but drop down display 5

why

Expected result

so please how to solve issue of drop down pagination to load as first page 10

then change length of rows data per page according to drop down change

so suppose datatable display 30 rows so

first page will have 10 rows and drop down will be selected value 10 and number of page will be 3 1,2,3

What I have tried:

<form id="FrmReprint" method="post">
    <div class="row" style="margin-top:50px;">
        <div class="col-lg-12 col-12 row">
<table id="example" class="display">
    <thead>
        <tr>

            <th><input id="chkHeader" type="checkbox"></th>
            <th>EntredDatetime</th>
            <th>OrderType</th>
            <th>OrderNo</th>
            <th>PrinterName</th>
            <th>BranchCode</th>
            <th>Id</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var reprint in Model.Reprintslist)
        {
            <tr>

                <td><input id="chkSel" name="chkSel"  type="checkbox"></td>
                <td>@reprint.LoggedDate</td>
                <td>@reprint.OrderType</td>
                <td>@reprint.OrderNo</td>
                <td>@reprint.PrinterName</td>
                <td>@reprint.BranchCode</td>

            </tr>
        }
    </tbody>
</table>
    </div>
    </div>
    <div class="row" style="margin-top:50px;">
        <div class="col-lg-12 col-12 row">

    </div>
    </div>
</form>

 <div class="pagination">
                <label>
                    Show
                    <select id="page-length">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                        <option value="25">25</option>
                        <option value="-1">All</option>
                    </select>
                    rows
                </label>
            </div>
<script type="text/javascript">
        $(document).ready(function () {
       var table = $("#example").dataTable({
                "bFilter": false,
                //"bInfo": false,
                "bSort": false,
                "pageLength": 10,
                "paging": true,
                "bPaginate": true,
                "pagingType": "full_numbers",

                "columnDefs": [
                    { className: "pad-md-left-p-10 pad-top-bottom-p-10", "targets": [0, 1, 2, 3, 4, 5, 6, 7] }
                ],
                "lengthMenu": [[5,10, 15,20, 25, 35, 50, 100, -1], [5,10, 15, 25, 35, 50, 100, "All"]],
            });
               $('#page-length').change(function () {
                var length = $(this).val();
                if (length === '-1') {
                    table.page.len(-1).draw(); // Show all rows
                } else {
                    table.page.len(length).draw(); // Show selected number of rows
                }
            });
  });
    </script>