Impaginazione Umbraco

Question

Utente Umbraco per la prima volta.

Sto cercando di aggiungere impaginazione al seguente ciclo di base:

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

    //Do Stuff// 

} 

Tutte le idee? Grazie

Answer 1

Dopo una buona quantità di lavoro e di ricerca, ecco il mio codice finale per la paginazione in Umbraco. Sostituisci gli esempi con i tuoi contenuti e pageSize è la quantità di post mostrati su ogni pagina.

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

Spero che questo blocchi un mal di testa per qualcuno.

Answer 2

miei 50 centesimi

Jeroen Breuer creato un github project chiamato quadro ibrida in cui ha aggiunto un po 'di percorso dirottamento ad un lato Umbraco per fare il paging e hanno modelli fortemente tipizzati. Dai un'occhiata e sono sicuro che ti piacerà. Utilizza anche il caching credo.

C'era anche un video su questo ho visto ma non ho potuto trovare più.

Spero che questo aiuti le persone a provare a implementare Paging e altre cose interessanti per i progetti di Umbraco.

UPDATE: risposta found the video on GitHub in readme

Answer 3

di Phil è grande, ma mi sento di raccomandare di mettere l'ordine sulle voci variabili piuttosto che il foreach - in questo modo se qualsiasi ordinamento più complicata è necessario che è stato fatto prima che l'impaginazione è implementato.

I frammenti di codice aggiornati sarebbe:

@{ 
    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

Questi sono tutti grandi risposte, in particolare il puntatore alla biblioteca di Jeroen Breuer, ma solo in nome di essere approfondita e parlare di tutte le opzioni - se siete usando jquery nel tuo progetto e se hai set di risultati relativamente piccoli potresti anche optare per una semplice soluzione di front end.

Dovresti semplicemente collegare l'intera lista di risultati e quindi utilizzare una libreria come JPList (http://jplist.com) come ho fatto qui. Vai a http://www.charterpublic.org/find-a-school/ e digita nella città di Denver, ad esempio. Vedrai che ci sono oltre 50 risultati. Mi legano l'intero elenco dei risultati quindi utilizzare jplist per rendere più ordinabile/paginabile ecc

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

Poi in fondo della vostra vista ...

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

Non ci sono altre librerie front-end che fanno questo , ma ho trovato JPList il più facile da usare per me.

Il lato negativo è che non è pigro, quindi è un po 'più pesante, ma con elenchi piccoli come il mio, questa è stata una soluzione semplice e completa.