Question

第一次使用Umbraco。

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

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

   //Do Stuff//

}

有什么想法吗？谢谢

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

希望这可以让某人头痛不已。

Answer 2

菲尔的答案很棒，但我建议把订单放在项目变量而不是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 3

我的50美分

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

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

希望这可以帮助人们尝试为你的Umbraco项目实施Paging和其他一些好东西。

更新：found the video on GitHub in readme

Answer 4

这些都是很好的答案，特别是指向Jeroen Breuer的图书馆的指针，但仅仅是为了彻底和谈论所有选项的名义 - 如果你在你的项目中使用jquery并且你有相对较小的结果集你也可以使用简单的前端解决方案。

您只需绑定整个结果列表，然后像我在这里一样使用像JPList（http://jplist.com）这样的库。例如，转到http://www.charterpublic.org/find-a-school/并输入丹佛市。您会看到有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对我来说最容易使用。

缺点是它没有加载，所以它有点重，但是像我这样的小清单，这是一个非常简单的解决方案。

Answer 5

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

上一个123456789 ...下一个以及当被选中时，例如第5页显示如下：

上一页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个页面，（...）。

帮助！

Umbraco分页

5 个答案: