Когда вы просто хотите изменить рендеринг полей внутри представления, раздел подкачки по-прежнему будет на странице, потому что он отображается в нижнем колонтитуле. Однако, если вы хотите использовать пользовательский рендеринг для всех элементов, включая верхний и нижний колонтитулы, вам придется реализовать разбиение на страницы самостоятельно.
К счастью, все данные, которые нам нужны для предоставления пейджинга, подобного пейджингу по умолчанию, находятся в контексте. Нам нужно прочитать из ctx.ListData в нашей функции рендеринга. ListData содержит следующие свойства:
- ctx.ListData.FirstRow;
- ctx.ListData.LastRow;
- ctx.ListData.PrevHref;
- ctx.ListData.NextHref;
Это вся информация, которая нам нужна. Мы можем сами визуализировать HTML в нижнем колонтитуле шаблона. Пример:
pagingControl: function (ctx) {
var firstRow = ctx.ListData.FirstRow;
var lastRow = ctx.ListData.LastRow;
var prev = ctx.ListData.PrevHref;
var next = ctx.ListData.NextHref;
var html = “‹div class='Paging'›”;
html += prev ? "‹класс='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 += следующий ? «‹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›”;
вернуть HTML;
}
Полный шаблон JS для рендеринга можно скачать здесь. Просто загрузите файл JS в библиотеку и перейдите из веб-части просмотра списка сообщений в блогах к файлу js. Файл JS настроен на отображение BaseViewID = 1, что соответствует AllPosts.aspx.
Примечание. Чтобы этот пример работал, добавьте поле «Тело» в представление.
Примечание. Вы можете использовать токен ~sitecollection в свойстве JSLink.
Результат
До:
После: