Skip to main content
Skip table of contents

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)
<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.
  ## 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>
## The JavaScript to dynamically hide and show our pages.
AJS.toInit(function() {
  var pageSize = $pageSize;
  var onPageNumberClick = function(e) {
    var clicked = $(;
    var pageNumber ='index');
    var indexStart = pageNumber * pageSize;
    var indexEnd = indexStart + pageSize;
    $('.pq-table-nav .aui-nav-selected').removeClass('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();

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:

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.