उम्ब्राको पेजिनेशन

Question

पहली बार उम्ब्राको उपयोगकर्ता।

मैं निम्न बुनियादी पाश को पृष्ठांकन जोड़ने के लिए देख रहा हूँ:

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

    //Do Stuff// 

} 

कोई भी विचार? धन्यवाद

Answer 1

अच्छी तरह से काम और शोध के बाद, यहां umbraco में अंकन के लिए मेरा अंतिम कोड है। उदाहरणों को अपनी सामग्री के साथ बदलें, और पेजसाइज प्रत्येक पृष्ठ पर दिखाए गए पदों की मात्रा है।

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

आशा है कि यह किसी के लिए सिरदर्द रोक देगा।

Answer 2

मेरे 50 सेंट

जेरोन Breuer एक github project बुलाया हाइब्रिड फ्रेमवर्क जिसमें उन्होंने एक Umbraco ओर करने के लिए कुछ मार्ग अपहरण जोड़ा गया है पेजिंग करने के लिए और दृढ़ता से टाइप किया है मॉडल तैयार किया। इसे देखो और मुझे यकीन है कि आप इसे पसंद करेंगे। यह मुझे विश्वास कैशिंग का भी उपयोग करता है।

इस बारे में एक वीडियो भी देखा गया था लेकिन मुझे अब यह नहीं मिला।

आशा है कि इससे लोगों को पेजिंग और कुछ अन्य अच्छी चीजें आपको उम्ब्राको परियोजनाओं को लागू करने में मदद मिलती है।

अद्यतन: found the video on GitHub in readme

Answer 3

फिल के जवाब महान है, लेकिन मैं नहीं बल्कि foreach से चर वस्तुओं पर आदेश डाल सिफारिश करेंगे - इस तरह से अगर किसी भी अधिक जटिल छंटाई से पहले पृष्ठांकन कार्यान्वित किया जाता है यह किया जा रहा है आवश्यक है।

अद्यतन कोड के टुकड़े होगा:

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

इन सभी महान जवाब, विशेष रूप से जेरोन Breuer के पुस्तकालय के लिए सूचक, लेकिन सिर्फ पूरी तरह से किया जा रहा है और सभी विकल्पों के बारे में बात कर के नाम पर कर रहे हैं - अगर आप कर रहे हैं अपने प्रोजेक्ट में jquery का उपयोग करके और यदि आपके पास अपेक्षाकृत छोटे परिणाम सेट हैं तो आप एक साधारण फ्रंट एंड केवल समाधान के साथ भी जा सकते हैं।

आप केवल संपूर्ण परिणाम सूची को बांध लेंगे और फिर जेपीएलिस्ट (http://jplist.com) जैसी लाइब्रेरी का उपयोग करें जैसा मैंने यहां किया है। http://www.charterpublic.org/find-a-school/ पर जाएं और उदाहरण के लिए शहर डेनवर टाइप करें। आप देखेंगे कि 50+ परिणाम हैं। मैं पूरी परिणामों की सूची के लिए बाध्य तो jplist का उपयोग करने के लिए यह sortable/पृष्ठांकन योग्य आदि

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

आपके विचार के तल पर

फिर ...

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

अन्य सामने के छोर पुस्तकालयों कि ऐसा करने हैं , लेकिन मैंने जेपीएलिस्ट को मेरे लिए उपयोग करने का सबसे आसान पाया।

नकारात्मक पक्ष यह आलसी लोड नहीं है इसलिए यह थोड़ा भारी है, लेकिन यहां मेरी छोटी छोटी सूचियों के साथ यह एक महान और सरल समाधान था।