Custom Pagination With Last and Previous - ajax

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" : "")">#i</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.