Custom Pagination With Last and Previous

Question

I am working on an ecommerce site where I have to use custom pagination with Ajax and it's almost done. Here is an image that how it looks:

Now the issue - The red highlighted 5 is the last page and I am trying to show as follows:

I am not sure how to handle this but I've tried the following: (Almost all works except the last section)

@for (int i = 1; i <= Model.TotalPages; i++)
{
    if (i == Model.CurrentPage)
    {
       <li class="@(i == Model.CurrentPage ? "active" : "")"><a href="#">@i</a></li>
    }
    else
    {
       <li><a class="page-number" href="javascript:void();">@i</a></li>
    }
}

@if (Model.CurrentPage < Model.TotalPages)
{
  <li>
    <a class="last-page" href="javascript:void();">@Model.TotalPages</a> @*Here I am willing to show Last, but currently it shows the last page number 5*@
 </li>
}

I am wondering how to show the name Last instead of the number I mean last page number. Again using partial view to show the details and pagination as follows:

@model OnlinePharmacy.Helpers.PagedData<OnlinePharmacy.Models.Product>
@{
    ViewBag.Title = "Products";
    List<OnlinePharmacy.Models.Product> products = ViewBag.Product;
 }

<script src="~/Scripts/jquery-1.5.1.min.js"></script>

<script type="text/javascript">
    $().ready(function () {
        $(".page-number").live("click", function () { //This section deals the pagination
            var page = parseInt($(this).html());
            var url = '/Product/Products/';
            url += 'page/' + page;

            $.ajax({
                url: '@Url.Action("Index")',
                data: { "page": page },
                success: function (data) {
                    $("#product-list").html(data);
                }
            });

            window.history.pushState(
               null,
               'Products', // new page title
               url // new url
           )
        });
    });

    $().ready(function () { //This section deals the pagination for the last page
        $(".last-page").live("click", function () {
            var page = parseInt($(this).html());
            var url = '/Product/Products/';
            url += 'page/' + page;

            $.ajax({
                url: '@Url.Action("Index")',
                data: { "page": page },
                success: function (data) {
                    $("#product-list").html(data);
                }
            });

            window.history.pushState(
             null,
             'Products',
             url
         )
        });
    });
</script>

<div id="product-list">
    @Html.Partial("Index")
</div>

I am sharing the models here for the products and pagination:

public class Product
{
    public int ProductId { get; set; }
    public int CategoryId { get; set; }
    public string ProductName { get; set; }
    [AllowHtml]
    public string cktext { get; set; }
    public double Price { get; set; }
    public double Stock { get; set; }
    public int Status { get; set; }
    public IEnumerable<SelectListItem> Categories { get; set; }
}

public class PagedData<T> where T : class
{
    public IEnumerable<T> Data { get; set; }
    public int TotalPages { get; set; }
    public int CurrentPage { get; set; }
}

With the following action, I am getting the page no. using Ajax (Please see the Ajax section above):

public ActionResult Index(int page)
{
    List<Product> products = aProductManager.GetAllProducts();
    ViewBag.Product = products.OrderBy(p => p.ProductId).Skip(PageSize * (page - 1)).Take(PageSize).ToList();

    var dataFromDb = new PagedData<Product>();

    dataFromDb.Data = products.OrderBy(p => p.ProductId).Skip(PageSize * (page - 1)).Take(PageSize).ToList();
    dataFromDb.TotalPages = Convert.ToInt32(Math.Ceiling((double)products.Count() / PageSize));
    dataFromDb.CurrentPage = page;

    return PartialView(dataFromDb);
} 

Updated: I require to do the following (Requirement little bit changed) - Frankly speaking, I am not aware how to do the below but would appreciate valuable suggestion. Thanks.

Answer 1

If you need to change your text you should change last section like this:

@if (Model.CurrentPage < Model.TotalPages)
{
  <li>
    <a class="last-page" href="javascript:void();">Last</a>
 </li>
}

To make your solution work fine i suggest you to move actual page number to data attribute of your <a> tag like this:

@if (Model.CurrentPage < Model.TotalPages)
{
  <li>
    <a data-page-number="@Model.TotalPages" class="last-page" href="javascript:void();">Last</a>
 </li>
}

And then change your js line:

$(".last-page").live("click", function () {
   var page = parseInt($(this).html());
   //your other code
});

To this:

$(".last-page").live("click", function () {
   var page = parseInt($(this).data('page-number'));
   //your other code
});

Ofcource it will be better to change your whole js solution to data attributes.