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