Click here to Skip to main content
15,892,746 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want to create a common pagination with grid view without installing any NuGet Package.Pagination and grid view will be use everywhere in my project

What I have tried:

Here is my model

public Pager Pager { get; set; }

public class Pager
{

    public Pager(int totalItems, int? page, int pageSize = 5)
    {
        var totalPages = (int)Math.Ceiling((decimal)totalItems / (decimal)pageSize);
        var currentPage = page != null ? (int)page : 1;
        var startPage = currentPage - 5;
        var endPage = currentPage + 4;
        if (startPage <= 0)
        {
            endPage -= (startPage - 1);
            startPage = 1;
        }
        if (endPage > totalPages)
        {
            endPage = totalPages;
            if (endPage > 10)
            {
                startPage = endPage - 9;
            }
        }

        TotalItems = totalItems;
        CurrentPage = currentPage;
        PageSize = pageSize;
        TotalPages = totalPages;
        StartPage = startPage;
        EndPage = endPage;
    }

    public int TotalItems { get; private set; }
    public int CurrentPage { get; private set; }
    public int PageSize { get; private set; }
    public int TotalPages { get; private set; }
    public int StartPage { get; private set; }
    public int EndPage { get; private set; }
}

Here is my controller
public ActionResult Index(int? page)
        {
            var dummyItems = db.Employees.Count();

            var pager = new Pager(dummyItems, page);

            var employees = new IndexViewModel
            {
                Employees = db.Employees.OrderBy(x => x.EmployeeId).Skip((pager.CurrentPage - 1) * pager.PageSize).Take(pager.PageSize).ToList(),
                Pager = pager
            };
            return View(employees);
           }


Here is my view
@if (Model.Pager.EndPage > 1)
{
    <div class="pagination">
        @if (Model.Pager.CurrentPage > 1)
        {
            <div  id="pagi" onclick="paging(@(null))"> First</div>
            <div  id="Previous" onclick="paging(@(Model.Pager.CurrentPage - 1))"> Previous</div>

        }

        @for (var page = Model.Pager.StartPage; page <= Model.Pager.EndPage; page++)
        {
            <div  id="pagi" class="@(page == Model.Pager.CurrentPage ? "active" : "")  ">
            <div onclick="paging(@page)">@page</div>
            </div>
        }

        @if (Model.Pager.CurrentPage < Model.Pager.TotalPages)
        {
          <div  id="pagi" onclick="paging(@(Model.Pager.CurrentPage + 1))"> Next</div>
          <div  id="pagi" onclick="paging(@Model.Pager.TotalPages)">  Last </div>

        }
    </div>
}
<script>
    function paging(page) {

        $.ajax({
            type: 'GET',
            url: '/Employee/Index?page=' + page,
            dataType: 'html'
        }).done(function (response) {
            $('#List').html(response);
        });
    }




</script>

<style>
Posted
Comments
F-ES Sitecore 21-Mar-17 5:02am    
What's wrong with what you have?
Member 13009937 21-Mar-17 7:49am    
Dear....sir
I want to create a common pagination using this code.By using this code one place in my Project .....i want to paginate more view page.All view page are use only a common pagination code.But i don't understands how i solve this problem.Please send me a complete code or link.

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