Pagination: splitting a table into different pages when the result has too many rows
If your Query returns a result with hundreds or even thousands of rows the resulting table might become too long for a single Confluence page.
You can solves this by creating a custom Template for your Query that will paginate your table instead of displaying all the results at once. Here is an example template that can be used to paginate a table:
## Set the size of a page of our table
#set($pageSize = 10)
## Calculate number of pages
#set($numberOfRows = $result.size())
#set($numberOfPages = $numberOfRows / $pageSize)
#set($rest = $numberOfRows % $pageSize)
#if ($rest > 0)
#set($numberOfPages = $numberOfPages + 1)
#end
<div class="paginated-pq-table" style="display:none;">
## Render the default PocketQuery table.
## If needed, replace with your own table or call another template that renders a table.
$PocketQuery.template("default")
## Render the navigation menu below our table
<div class="pq-table-nav-wrapper" style="margin:10px;text-align:center;">
<ol class="aui-nav aui-nav-pagination pq-table-nav" style="display: inline-block;">
#foreach ($number in [1..$numberOfPages])
#set($dataIndex = $number - 1)
<li><a href="#" data-index="$dataIndex">$number</a></li>
#end
</ol>
<div>
</div>
## The JavaScript to dynamically hide and show our pages.
<script>
AJS.toInit(function() {
var pageSize = $pageSize;
var onPageNumberClick = function(e) {
var clicked = $(e.target);
var pageNumber = clicked.data('index');
var indexStart = pageNumber * pageSize;
var indexEnd = indexStart + pageSize;
e.preventDefault();
$('.pq-table-nav .aui-nav-selected').removeClass('aui-nav-selected');
clicked.closest('li').addClass('aui-nav-selected');
$('.paginated-pq-table tbody tr').hide().slice(indexStart, indexEnd).show();
}
$('.pq-table-nav a').on('click', onPageNumberClick);
$('.pq-table-nav a:first').click();
$('.paginated-pq-table').show();
});
</script>
If you already are using another Template that renders a customized table, simply change the PocketQuery.template("default") call in line 16 to PocketQuery.template("name_of_your_template").
The result should look like this:
