Umbraco分頁

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

Phil的答案很棒，但是我建議將訂單放在items變量而不是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創建了一個名為Hybrid Framework的github項目 ，他在其中添加了一些路由劫持到umbraco端進行分頁並具有強類型模型。 看看它，我相信你會喜歡它。 它也使用我相信的緩存。

還有一個關於我看過的視頻，但我再也找不到了。

希望這有助於人們嘗試實現Paging和其他一些好東西給你Umbraco項目。

更新： 在自述文件中找到GitHub上的視頻

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共享相同的代碼來實現：

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

救命！