0

nerddinner チュートリアルに基づいてこのページャーを実装しました。

最初のリンクと最後のリンクの間にあるすべてのページを一覧表示するように以前に設定していましたが、現在は制御不能になっています :) 以下の例では、ページング用の HTML / コード ナゲットがあります。最初のリンクと最後のリンクの間のページ番号リストが 10 に減りました。

しかし、これは変わりません。現在のページに関係なく、1〜10がリストされます。次の 10 ページへのリンクを表示したいと思います。どんな助けでも大歓迎です！

<ul id="paginator">
    <% if (Model.HasPreviousPage)
       { %>
    <li>
        <%= Html.RouteLink("First Page", new { namespaces = "Admin", controller = "Products", action = "ViewAll", page = 0 })%></li>
    <% } %>
    <% else %>
    <% { %>
    <li>First Page</li>
    <% } %>
    <% for (int i = 0; i < 10; i++) %>
    <% { %>
    <% if (i == Model.PageIndex) %>
    <% { %>
    <li>
        <%: i+1 %></li>
    <% } %>
    <% else %>
    <% { %>
    <li>
        <%= Html.RouteLink((i + 1).ToString(), new { namespaces = "Admin", controller = "Products", action = "ViewAll", page = i })%>
    </li>
    <% } %>
    <% } %>-->
    <% if (Model.HasNextPage)
       { %>
    <li>
        <%= Html.RouteLink("Last Page", new { namespaces = "Admin", controller = "Products", action = "ViewAll", page = Model.TotalPages - 1 })%></li>
    <% } %>
    <% else %>
    <% { %>
    <li>Last Page</li>
    <% } %>
</ul>
4

2 に答える 2

1

現在のページを使用して、10 個のアイテムを配置する場所を決定できます。理想的には、現在のページの両側に 5 ページ (または現在のページの両側に 'n' ページ) を表示することをお勧めします。このためのアルゴリズムは、かなり簡単に実装できます...

var startingPage = currentPage - 5;
var endingPage = currentPage + 5;

これに追加する唯一の複雑な点は、開始ページが 1 未満の場合、または終了ページが最終ページよりも大きい場合、10 の結果をシムする必要があることです。

最後に、11 ページの結果がない場合を処理する必要があります。

var startingPage = currentPage - 5;
if (startingPage < 1) {
    startingPage = 1;
}

var endingPage = currentPage + 11;
if (endingPage > numberOfPages) {
    endingPage = numberOfPages;
}

ページリンクを作成するためのループの開始と終了ができました。ページングの開始と終了を除いて、現在のページは中央にあります。

for (int i = startingPage; i < endingPage; i++)

このコードからハードコーディングされた値を移動し、本番コードの式を短くすることができます - 私は概念を最も簡単にする方法で物事を行いました.

また、このロジックを必要とするページが複数ある場合は、必要な場所にページ リンクを作成できるヘルパー クラスにこのロジックを移動することをお勧めします。

于 2012-09-05T09:09:47.967 に答える
0

WebHelpers クラス (NuGet で利用可能) から WebGrid ヘルパーをいつでも使用できます。これにより、ページネーションを含む必要なものがすべて提供されます。その後、css を使用してスタイルを設定する必要があります。

Avery の良い参考文献は次のとおりです。 http://www.dotnetcurry.com/ShowArticle.aspx?ID=618

于 2012-09-05T08:47:48.237 に答える