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