Question

It’s thick o’clock on Monday afternoon…

How do I add a pager to a projection list?

I have a list of 135 Recorded Species content items that comply with a Query. So how do I page them? 🙁

Checking Show Pager box in the Edit Projection page just adds:

 << Older Newer >> 

links at the bottom of the page. The html rendered is, for example:

<ul class="group pager" shape-id="3">        
        <li class="page-next" shape-id="3">« <a href="/wetlands/recorded-species?page=4" shape-id="3">Older</a>
        </li>
        <li class="page-previous" shape-id="3"><a href="/wetlands/recorded-species?page=2" shape-id="3">Newer</a> »
        </li>
</ul>

Ie:

<< Older increases the page number. Newer >> decreases the page number. This looks like a bug to me, as I would expect Previous and Next links, as well as page number links. Not older and newer…

Is there some module that needs disabling?

Answer 1

This is a feature: the default frontend pager is just like that (page 1 is always the newest page).
For a richer pager just take a look at the one in the TheAdmin theme (Views/Pager). This below is a stripped down version of it, displaying also the page numbers:

@{
    Model.PreviousText = T("<");
    Model.NextText = T(">");

    var routeData = new RouteValueDictionary(ViewContext.RouteData.Values);
    var queryString = ViewContext.HttpContext.Request.QueryString;
    if (queryString != null)
    {
        foreach (string key in queryString.Keys)
        {
            if (key != null && !routeData.ContainsKey(key))
            {
                var value = queryString[key];
                routeData[key] = queryString[key];
            }
        }
    }

    if (routeData.ContainsKey("id") && !HasText(routeData["id"]))
    {
        routeData.Remove("id");
    }


    Model.Metadata.Type = "Pager_Links";
    IHtmlString pagerLinks = Display(Model);

    Model.Classes.Add("selector");
    var pageSizeTag = Tag(Model, "ul");

    if (Model.RouteData != null)
    {
        foreach (var rd in Model.RouteData.Values)
        {
            routeData[rd.Key] = rd.Value;
        }
    }
}
@if (Model.TotalItemCount > 1)
{
    <div class="pager-footer">
        @pagerLinks
    </div>
}