How to customize design in PagedList.MVC?

Question

Can anyone help me out to add or update CSS classes and HTML in PagedList.MVC

This is my Index.cshtml

<span>Page</span> @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) <Span>of</Span> @Model.PageCount
@Html.PagedListPager(Model, page => Url.Action("Index", new { page, currentFilter = ViewBag.CurrentFilter }))

When I have inspected in browser I got below Html

<div class="pagination-container">
    <ul class="pagination">
        <li class="active"><a>1</a></li>
        <li><a href="/abc/?page=2">2</a></li>
        <li class="PagedList-skipToNext"><a href="/abc/?page=2" rel="next">»</a></li>
    </ul>
</div>

Instead of above HTML I need this HTML

<div>
    <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</div>

Answer 1

If you use X.PagedList (which is a fork of troygoode's PagedList), you can make use of the PageClasses option in PagedListRenderOptions.

Here's how you would achieve the classes that Bootstrap 4 is looking for:

@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => 
    Url.Action("Index", new { page = page }), 
    new PagedListRenderOptions {
        LiElementClasses = new string[] { "page-item" },
        PageClasses = new string[] { "page-link" }
})

See documentation here.

Answer 2

This way works for me:

first import on top of the page: @using X.PagedList.Mvc.Core.Common;

and than use like this:

   @Html.PagedListPager(Model, page => Url.Action("Index", new { page }), new PagedListRenderOptions
               {                       
                        DisplayLinkToIndividualPages = true,
                        DisplayPageCountAndCurrentLocation = false,
                        MaximumPageNumbersToDisplay = 10,
                        LiElementClasses = new string[] { "page-item" },
                   PageClasses = new string[] { "page-link" },
                   
                    })