How do you enable paging in a Sharepoint List View Webpart using Client Side Rendering

Question

I have a list of a custom content type and are using a JSlink file to render the content of the list in a list view web part. I would like the list view webpart to display 30 items from the list with the paging buttons at the bottom for any additional items in the list, but it is only displaying the first 30 without the paging buttons. I thought if you set the "limit" field in the list view it would automatically add the paging buttons to the list view in the web part? Do I need to add my own JavaScript paging solution since it is using a JSLink file to create the template?

Answer 1

Default paging should appear unless you override the whole view. Use below code for footer to render the paging.

   (function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Item = ItemOverrideFun;
overrideCtx.Templates.Footer = pagingControl;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

 function pagingControl(ctx) 
 {
    var firstRow = ctx.ListData.FirstRow;
    var lastRow = ctx.ListData.LastRow;
    var prev = ctx.ListData.PrevHref;
    var next = ctx.ListData.NextHref;
    var html = "";
    if (firstRow != undefined || lastRow != undefined || prev != undefined || next != undefined) 
    {
        html +="<div class='Paging'>";
        html += prev ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" + prev + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-left' src='/_layouts/15/images/spcommon.png?rev=23' /></span></a>" : "";
        html += "<span class='ms-paging'><span class='First'>" + firstRow + "</span> - <span class='Last'>" + lastRow + "</span></span>";
        html += next ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" + next + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-right' src='/_layouts/15/images/spcommon.png?rev=23'/></span></a>" : "";
        html += "</div>";
    }
    return html;
}
function ItemOverrideFun(ctx) {
}

Answer 2

Are you overriding the entire view? If you are only overriding individual fields, or just using OnPostRender to do some final manipulation after the view is rendered, the paging should still be there.

But, if you are overriding the entire view, you might be able to get the default paging controls back by using ctx.RenderFooter() which should spit out the default HTML for the footer, which would include the paging controls. You could wrap that in some custom HTML like

'<div id="myCustomFooter" class="applyCoolStyling">' + ctx.RenderFooter() + '</div>'

See this fantastic article on CSR that talks a little bit about using the built in functions for rendering the different sections of a view, and what those sections are.