Umbraco Paginierung

Question

Zum ersten Mal Umbraco Benutzer.

Ich suche Paginierung, die folgenden grundlegenden Schleife hinzuzufügen:

@foreach (var example in CurrentPage.Children.OrderBy("createDate descending").Take(8)){ 

    //Do Stuff// 

} 

Irgendwelche Ideen? Danke

Answer 1

Nach einer guten Menge von Arbeit und Forschung, hier ist mein endgültiger Code für Umbruch in Umbraco. Ersetzen Sie die Beispiele durch Ihre Sachen und pageSize ist die Anzahl der Beiträge, die auf jeder Seite angezeigt werden.

@{ 
    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()); 
       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).OrderBy("createDate descending")) 
{ 

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

Hoffen, dass dies Kopfschmerzen für jemanden stoppt.

Answer 2

Mein 50 Cent

Jeroen Breuer schaffte einen github project genannt Hybrid-Framework, in dem er eine Route Hijacking zu einer umbraco Seite hinzugefügt Paging zu tun und haben Modelle stark typisierte. Schau es dir an und ich bin mir sicher, dass es dir gefallen wird. Es verwendet auch Caching, glaube ich.

Es gab auch ein Video darüber, das ich sah, aber ich konnte es nicht mehr finden.

Hoffe das hilft Menschen, die versuchen, Paging und einige andere nette Sachen zu Ihnen Umbraco Projekte zu implementieren.

UPDATE: found the video on GitHub in readme

Answer 3

Phils Antwort ist toll, aber ich würde empfehlen, den Auftrag auf die Elemente variable anstatt die foreach setzen - diese Weise, wenn eine kompliziertere Sortierung notwendig ist es gemacht wird, bevor die Paginierung umgesetzt wird.

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

Answer 4

Diese alle großen Antworten, vor allem der Zeiger auf Jeroen Breuers Bibliothek, aber nur im Namen gründlich zu sein und über alle Optionen zu sprechen - wenn Sie Verwenden Sie jQuery in Ihrem Projekt und wenn Sie relativ kleine Ergebnismengen haben, können Sie auch mit einer einfachen Lösung für das Frontend arbeiten.

Sie würden nur die gesamte Ergebnisliste binden und dann eine Bibliothek wie JPList (http://jplist.com) verwenden, wie ich hier getan habe. Gehen Sie zu http://www.charterpublic.org/find-a-school/ und geben Sie zum Beispiel die Stadt Denver ein. Sie werden sehen, dass es 50+ Ergebnisse gibt. Ich binde die gesamte Ergebnisliste dann verwenden jplist zu machen sortierbar/seitenwechselbar usw.

@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 an der Unterseite der Ansicht ...

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

Es gibt andere Front-End-Bibliotheken, die dies tun , aber ich fand JPList am einfachsten für mich.

Der Nachteil ist, dass es nicht faul geladen ist, so dass es ein wenig schwerer ist, aber mit kleinen Listen wie meiner hier war dies eine großartige und einfache Lösung.