Umbraco 分页

Posted 2023-03-10

【中文标题】Umbraco 分页

【英文标题】：Umbraco pagination

【发布时间】：2014-09-14 09:31:39

【问题描述】：

第一次使用 Umbraco。

我希望将分页添加到以下基本循环：

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

   //Do Stuff//

有什么想法吗？谢谢

【参考方案1】：

经过大量的工作和研究，这是我在 umbraco 中分页的最终代码。将示例替换为您的内容，pageSize 是每个页面上显示的帖子数量。

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

希望这不会让某人头疼。

【讨论】：

您好。非常感谢。我一直在查看相当多的分页脚本，这是迄今为止实现和工作最简单的。

你为什么要做 Umbraco.TypedContent(Model.Content.Id)？ Umbraco.Content 是一个 IPublishedContent。当您已经拥有模型供您使用时，您正在访问缓存

【参考方案2】：

Phil 的回答很好，但我建议将顺序放在 items 变量而不是 foreach 上 - 这样，如果需要进行更复杂的排序，则在分页实施之前完成。

更新后的代码 sn-ps 将是：

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

【参考方案3】：

我的 50 美分

Jeroen Breuer 创建了一个名为 Hybrid Framework 的 github project，其中他在 umbraco 端添加了一些路由劫持来进行分页并具有强类型模型。看看它，我相信你会喜欢它。我相信它也使用缓存。

我还看到了一个关于此的视频，但我找不到了。

希望这有助于人们尝试为您的 Umbraco 项目实施 Paging 和其他一些好东西。

更新：found the video on GitHub in readme

【讨论】：

我也是 Jeroen Breuer 的混合框架的忠实粉丝。上面的内容很棒，但如果您在分页时不必刷新整个页面，并且混合框架向您展示如何对其进行 Ajaxify，那就更好了。马特

【参考方案4】：

这些都是很好的答案，尤其是指向 Jeroen Breuer 库的指针，但只是以彻底和谈论所有选项的名义——如果您在项目中使用 jquery 并且结果集相对较小，您可以也可以使用简单的前端解决方案。

您只需绑定整个结果列表，然后像我在这里所做的那样使用像 JPList (http://jplist.com) 这样的库。例如，转到 http://www.charterpublic.org/find-a-school/ 并输入 city Denver。您会看到有 50 多个结果。我绑定整个结果列表，然后使用 jplist 使其可排序/可分页等。

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

还有其他前端库可以做到这一点，但我发现 JPList 对我来说最容易使用。

缺点是它不是延迟加载的，所以它有点重，但是像我这里这样的小型列表，这是一个伟大而简单的解决方案。

【参考方案5】：

我知道这是旧的，我使用了 Phil 代码推荐并且效果很好。 但是增加分页按钮时的所有页面都可以无限再生，我的意思是我该怎么做：

Prev 123456789...Next 和当被选中时，例如第 5 页显示如下：

Prev 5 6 7 8 9 10 11 12 13 ... 下一页和反页或最后一页如下：

上一页... 47 48 49 50 51 52 53 54 55

我的意思是，在分页按钮上点击只有 9 页，但我需要使用与 Phil Share 相同的代码来实现：

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

根据页面位置，限制为 9 页（...）。

救命！