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:

CODE

## 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: