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

[ahmedaziz]

I work on razor asp.net core I need to allow data table 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

what i try as below

<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>

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

 

[Skydiver]

Looks like a JavaScript/HTML problem rather than a C# problem. All the Razor code there does is show as many rows as there are in the model. This is a C# forum, not a JavaScript forum.

I see no indication in the JavaScript nor the HTML where the initial default value of 10 for the drop-down is set.