使用 jQuery 和 MVC 在视图中分页数据

Question

我的查看代码：

@for (int i = 1; i < Model.Page + 1; i++)
{

    <div class="Page" style="display:inline-table">
        @Ajax.ActionLink(i.ToString(CultureInfo.InvariantCulture), Model.ActionName, Model.Controller,
            routeValueDictionary,
            new AjaxOptions
            {
                HttpMethod = "POST",
                OnSuccess = "OnSuccess",
                UpdateTargetId = "Table",
                InsertionMode = InsertionMode.Replace

            }, new Dictionary<string, object>
            {
                {"style", "color:red;padding: 10px"}
            })
    </div>
}

不。页数：50

如图：

太多了。我希望它们像这样短：

1  2  3  4  5  ... 46  47  48  49  50

他们是否用 jQuery 做到了？

Answer 1

尝试以下操作。虽然可以进行许多增强，但这将帮助您开始：

@{
    var pagesToShow = 5; /*Total number of links to show in starting*/
    var endPoints = 2; /*Total number of links to show for end pages*/
}

@if (Model.CurrentPage > 1)
{
    <a href="#@(Model.CurrentPage - 1)">Prev (@(Model.CurrentPage - 1))</a>
}
else
{
    <a href="#@(Model.CurrentPage)"style="color:grey;">
                               Prev (@(Model.CurrentPage))</a>
}

@for (var i = 1; i <= Model.Page && i<=pagesToShow; i++)
{
    <div class="Page" style="display:inline-table">
        <a href="#@(i)">Page + @(i)</a></div>
}    

@if (pagesToShow < Model.Page)
{
    <span>...</span>
    for (var i = Model.Page - endPoints + 1; i <= (Model.Page); i++)
        <a href="#@(i)">Page + @(i)</a>
}

@if (Model.CurrentPage < Model.Page)
{
    <a href="#@(Model.CurrentPage + 1)">Next (@(Model.CurrentPage + 1))</a>
}
else
{
    <a href="#@(Model.CurrentPage)"style="color:grey">
                                    Next (@(Model.CurrentPage))</a>
}