Click here to Skip to main content
15,919,613 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
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>
Posted
Updated 7-Jul-23 18:06pm

1 solution

You seems to be missing setting the dropdown value. You setup your table but dropdown is not connected to table default settings. For first time, you need to set dropdown as needed.

Add in your script tag in document ready at the end:
JavaScript
$("#page-length").val('10');  //default to 10 to start

More details on .val: .val() | jQuery API Documentation[^]

If you also want to trigger the change even with the setting for first time:
JavaScript
$("#page-length").val('10').change();  //default to 10 to start with change trigger
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900