Question

我正在开发一个电子商务网站，我必须使用Ajax自定义分页，这几乎已经完成了。这是一个看起来如何的图像：

现在问题 - 红色突出显示5是最后一页，我试图显示如下：

我不知道如何处理这个问题，但我已经尝试过以下方法:(除了上一节以外几乎所有的工作都是如此）

@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>
}

我想知道如何显示名称上次而不是我的意思是最后一页的数字。再次使用局部视图显示细节和分页如下：

@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>

我在这里分享产品和分页的模型：

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; }
}

通过以下操作，我得到的页面没有。使用Ajax（请参阅上面的Ajax部分）：

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);
}

更新：我需要执行以下操作（要求稍微更改一下） - 坦率地说，我不知道如何执行以下操作，但我们非常感谢您提出有价值的建议。谢谢。

Answer 1

如果您需要更改文字，请更改上一部分，如下所示：

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

为了使您的解决方案正常运行，我建议您将实际页码移至data标记的<a>属性，如下所示：

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

然后改变你的js行：

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

对此：

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

Ofcource最好将整个js解决方案更改为data属性。

自定义分页与上一个和上一个

1 个答案: