Click here to Skip to main content
15,879,348 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I working on asp.net core 5 mvc ,I face issue on display pagination control

i don't know How to fix issue of pagination

exactly i implement pagination according to this article

Pagination in asp.net mvc core, entity framework and simplePagination.js[^]

my issue exactly on jquery pagination
so How to solve this issue please

What I have tried:

@model PagerDemo.ViewModels.EmployeePageViewModel

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<link href="~/lib/simplePagination.js/simplePagination.css" rel="stylesheet" />
<script src="~/lib/simplePagination.js/jquery.simplePagination.js"></script>
<script src="~/scripts/site.js"></script>
<table>
    <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
    @foreach (var emp in Model.Employees)
    {
        <tr>
            <td>@emp.Id</td>
            <td>@emp.FirstName</td>
            <td>@emp.LastName</td>
        </tr>
    }
</table>
<ul id="emp-pagination" class="pagination"></ul>

<input asp-for="Pager.NumberOfPages" type="hidden" id="hdnTotalNumberOfPages" value="@Model.Pager.NumberOfPages" />
<input asp-for="Pager.CurrentPage" type="hidden" id="hdnCurrentPage" value="@Model.Pager.CurrentPage" />


JavaScript
$(function () {
    $('#emp-pagination').pagination({
        pages: $('#hdnTotalNumberOfPages').val(),
        currentPage: $('#hdnCurrentPage').val(),
        itemsOnPage: 10,
        cssStyle: 'light-theme',
        onPageClick: function (pageNo) {
            var url = "/Home/Index?pageNumber=" + pageNo;
            window.location.href = url; 
        },
        hrefTextSuffix: '',
        selectOnClick: true
    });
});
Posted
Comments
Member 15627495 7-Dec-22 3:03am    
as jquery is JS too, use the tag
 <script> code jquery and js here </script> 


I never see a jquery call by $(function... // maybe a second error
ahmed_sa 7-Dec-22 3:09am    
so can you tell me how to call jquery inside index.cshtml
Member 15627495 7-Dec-22 3:18am    
with the event 'ready' jquery :
https://learn.jquery.com/using-jquery-core/document-ready/
Richard Deeming 8-Dec-22 8:44am    
According to the documentation[^], you should use $(...), not $(document).ready(...).
ahmed_sa 7-Dec-22 3:22am    
can you show me how to use jquery with web page index.cshtml

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