Umbraco Paginierung

Phil ' s Antwort ist Super, aber ich würde empfehlen, die Bestellung auf die Elemente, die variable statt der foreach - so wenn einer mehr komplizierten Sortierung ist notwendig, es ist getan, bevor die Paginierung umgesetzt.

Den aktualisierten code-Schnipsel wäre:

@{
    var pageSize = 8;
    if(Model.Content.HasValue("numberOfItemsPerPage")){
    pageSize = Model.Content.GetPropertyValue<int>("numberOfItemsPerPage");}

    var page = 1; int.TryParse(Request.QueryString["page"], out page);
    var items = Umbraco.TypedContent(Model.Content.Id).Children.Where(x => x.DocumentTypeAlias == "exampleAlias" && x.IsVisible()).OrderByDescending(x => x.CreateDate);
    var totalPages = (int)Math.Ceiling((double)items.Count() / (double)pageSize);

    if (page > totalPages)
    {
        page = totalPages;
    }
    else if (page < 1)
    {
        page = 1;
    }

    foreach (var item in items.Skip((page - 1) * pageSize).Take(pageSize)
    {
        <div class="example-div">
            <h2>@item.GetPropertyValue("example")</h2>
        </div>
    }

   if (totalPages > 1)
   {
       <div class="pagination">
           <ul>
               @if (page > 1)
               {
                   <li><a href="?page=@(page-1)">Prev</a></li>
               }
               @for (int p = 1; p < totalPages + 1; p++)
               {
                   <li class="@(p == page ? "active" : string.Empty)">
                       <a href="?page=@p">@p</a>
                   </li>
               }
               @if (page < totalPages)
               {
                   <li><a href="?page=@(page+1)">Next</a></li>
               }
           </ul>
       </div>
    }
}

Diese sind alles tolle Antworten, vor allem die Zeiger auf Jeroen Breuer Bibliothek, sondern nur in den Namen des seins eine Gründliche und sprechen über alle Optionen-wenn Sie mit jquery in Ihr Projekt und wenn Sie haben relativ kleine Resultsets Sie könnte auch gehen mit einem einfachen front-end-Lösung.

Sie würden nur binden Sie die gesamte Ergebnisliste, und dann benutzen Sie eine Bibliothek wie JPList (http://jplist.com ) als ich es hier getan habe. Gehen Sie zu http://www.charterpublic.org/find-a-school/ und Typ in der Stadt Denver zum Beispiel. Du wirst sehen, es gibt 50+ Ergebnisse. Ich Binde die gesamte Ergebnis-Liste dann verwenden jplist, um es sortierbar/auslagerungsfähigen etc.

@if (results.Any())
{
    <div class="list">
    @foreach (var result in results.OrderByDescending(r => r.Name))
    {
        <div class="list-item">
        //build your item
        </div>
    }
    </div>
}
<div class="jplist-panel">
    <!-- bootstrap pagination control -->
    <ul class="pagination text-center jplist-pagination"
        data-control-type="boot-pagination"
        data-control-name="paging"
        data-control-action="paging"
        data-range="4"
        data-mode="google-like"></ul>
    <!-- items per page dropdown -->
    <div class="hidden dropdown pull-left jplist-items-per-page"
         data-control-type="boot-items-per-page-dropdown"
         data-control-name="paging"
         data-control-action="paging">
        <button class="btn btn-primary dropdown-toggle"
                type="button"
                data-toggle="dropdown"
                id="dropdown-menu-1"
                aria-expanded="true">
            <span data-type="selected-text">Items per Page</span>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu-1">

            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" data-number="3">3 per page</a>
            </li>

            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" data-number="5">5 per page</a>
            </li>

            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" data-number="10" data-default="true">10 per page</a>
            </li>

            <li role="presentation" class="divider"></li>

            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#" data-number="all">View All</a>
            </li>
        </ul>
    </div>
</div>

Dann am unteren Rand Ihrer Ansicht...

<script type="text/javascript">
    $(document).ready(function () {
        $('#demo').jplist({ 
            itemsBox: '.list', 
            itemPath: '.list-item', 
            panelPath: '.jplist-panel' 
        });
    });
</script>

Gibt es auch andere front-end-Bibliotheken, die dies tun, aber ich fand JPList am einfachsten zu bedienen für mich.

Der Nachteil ist, Sie ist nicht faul geladen, so dass es ein wenig schwerer, aber mit kleineren Listen, wie die meine hier, das war eine tolle und einfache Lösung.