So I followed this post to implement paging in my custom JSLINK rendering template, and got that working great. The only downside to it is that the paging actions are full page post-backs whereas on the stock SP list web-part they use ajax. After digging into the the MS code I found that the paging calls were being wrapped with a call to the RefreshPageTo
, after employing this I'm still not getting ajax paging.
In the MS script INPLVIEW.js
their seems to be some rules in how the markup is decorated and a property they add somewhere called clvp
to one of the outer rendering block html elements. It seems their must be a JS method that I can call to ajaxify my template markup block somehow.
My question is how can ajax paging be implemented in a custom JSLINK rendering template? This simple template below should work with Ajax paging but does not.
window.MyNewsList = window.MyNewsList || {};
window.MyNewsList.NewsLink = {
header: function (ctx) {
var hdrHtml = "";
if( window.MyNewsList.NewsLink.canAddNews() ) {
hdrHtml += "<div>";
hdrHtml += "<span class=\"link-item\"><a href=\"/news/Lists/Pages/Forms/NewForm.aspx\">Add New</a></span>";
hdrHtml += "</div>";
}
return hdrHtml;
},
body: function (ctx) {
bodyHtml = "";
bodyHtml += "<div>";
bodyHtml += ctx.CurrentItem.Title;
bodyHtml += "</div>";
return bodyHtml;
},
footer: function (ctx) {
var footerHtml = "";
var firstRow = ctx.ListData.FirstRow;
var lastRow = ctx.ListData.LastRow;
var prev = ctx.ListData.PrevHref;
var next = ctx.ListData.NextHref;
footerHtml += "<table class=\"ms-bottompaging\"><tr><td>";
if (prev)
footerHtml += "<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>";
else
footerHtml += "<a class='ms-commandLink ms-promlink-button ms-promlink-button-disabled' href='javascript:void(0);'><span class='ms-promlink-button-image'><img class='ms-promlink-button-left-disabled' src='/_layouts/15/images/spcommon.png?rev=23' /></span></a>";
footerHtml += "<span class=\"ms-promlink-button-inner\"></span>";
if (next)
footerHtml += "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='javascript:void(0);' onclick=\"RefreshPageTo(event, "" + next + "");return false;\"><span class='ms-promlink-button-image'><img class='ms-promlink-button-right' src='/_layouts/15/images/spcommon.png?rev=23'/></span></a>";
else
footerHtml += "<a class='ms-commandLink ms-promlink-button ms-promlink-button-disabled' href='javascript:void(0);'><span class='ms-promlink-button-image'><img class='ms-promlink-button-right-disabled' src='/_layouts/15/images/spcommon.png?rev=23' /></span></a>";
footerHtml += "</td></tr></table>";
return footerHtml;
}
};
// anonymous self-executing function to setup JSLink templates on page load..
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
//Tempate overrides
overrideCtx.Templates.Header = window.MyNewsList.NewsLink.header;
overrideCtx.Templates.Item = window.MyNewsList.NewsLink.body;
overrideCtx.Templates.Footer = window.MyNewsList.NewsLink.footer;
//List Settings
//Pages List has Type 850 publishing page library
//BaseViewID = 1 means default View
//overrideCtx.BaseViewID = 1;
overrideCtx.ListTemplateType = 850;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
EDIT:
Unfortunately the accepted solution didn't work out after all. It would go to the first page fine but then if you went back to the prior page the template does not render your markup. From there it just gets really glitched up. I ended up just punting and leaving it with the postback paging until I have more time to dig into this.