Pager documentation

Pager allows you to paginate the children of an element, for example splitting a list into multiple pages. There are options to set the number of items per page (default: 10) and also work with non-direct child descendants (an example is given below).

Example

Simple example

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17

Advanced example

Column 1 Column 3 Column 3
Row 1, Column 1 Row 1, Column 3 Row 1, Column 3
Row 2, Column 1 Row 2, Column 3 Row 2, Column 3
Row 3, Column 1 Row 3, Column 3 Row 3, Column 3
Row 4, Column 1 Row 4, Column 3 Row 4, Column 3
Row 5, Column 1 Row 5, Column 3 Row 5, Column 3
Row 6, Column 1 Row 6, Column 3 Row 6, Column 3
Row 7, Column 1 Row 7, Column 3 Row 7, Column 3
Row 8, Column 1 Row 8, Column 3 Row 8, Column 3
Row 9, Column 1 Row 9, Column 3 Row 9, Column 3
Row 10, Column 1 Row 10, Column 3 Row 10, Column 3
Row 11, Column 1 Row 11, Column 3 Row 11, Column 3
Row 12, Column 1 Row 12, Column 3 Row 12, Column 3 
<h4>Simple example</h4>
<ul id="pagerlist" class="pager">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
	<li>Item 5</li>
	<li>Item 6</li>
	<li>Item 7</li>
	<li>Item 8</li>
	<li>Item 9</li>
	<li>Item 10</li>
	<li>Item 11</li>
	<li>Item 12</li>
	<li>Item 13</li>
	<li>Item 14</li>
	<li>Item 15</li>
	<li>Item 16</li>
	<li>Item 17</li>
</ul>
<h4>Advanced example</h4>
<table class="pager pagesize-5 selector-tbody startpage-2">
<thead>
	<tr>
		<th>Column 1</th>
		<th>Column 3</th>
		<th>Column 3</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Row 1, Column 1</td>
		<td>Row 1, Column 3</td>
		<td>Row 1, Column 3</td>
	</tr>
	<tr>
		<td>Row 2, Column 1</td>
		<td>Row 2, Column 3</td>
		<td>Row 2, Column 3</td>
	</tr>
	<tr>
		<td>Row 3, Column 1</td>
		<td>Row 3, Column 3</td>
		<td>Row 3, Column 3</td>
	</tr>
	<tr>
		<td>Row 4, Column 1</td>
		<td>Row 4, Column 3</td>
		<td>Row 4, Column 3</td>
	</tr>
	<tr>
		<td>Row 5, Column 1</td>
		<td>Row 5, Column 3</td>
		<td>Row 5, Column 3</td>
	</tr>
	<tr>
		<td>Row 6, Column 1</td>
		<td>Row 6, Column 3</td>
		<td>Row 6, Column 3</td>
	</tr>
	<tr>
		<td>Row 7, Column 1</td>
		<td>Row 7, Column 3</td>
		<td>Row 7, Column 3</td>
	</tr>
	<tr>
		<td>Row 8, Column 1</td>
		<td>Row 8, Column 3</td>
		<td>Row 8, Column 3</td>
	</tr>
	<tr>
		<td>Row 9, Column 1</td>
		<td>Row 9, Column 3</td>
		<td>Row 9, Column 3</td>
	</tr>
	<tr>
		<td>Row 10, Column 1</td>
		<td>Row 10, Column 3</td>
		<td>Row 10, Column 3</td>
	</tr>
	<tr>
		<td>Row 11, Column 1</td>
		<td>Row 11, Column 3</td>
		<td>Row 11, Column 3</td>
	</tr>
	<tr>
		<td>Row 12, Column 1</td>
		<td>Row 12, Column 3</td>
		<td>Row 12, Column 3</td>
	</tr>
</tbody>
</table>

Settings

Valid elements

Elements with children

Classname

pager

Attributes

None

CSS parameters (what's this?)

pagesize (optional, default = 10)
The number of items to show on each page
startpage (optional, default = 1)
The number page to show by default
selector (optional)
The CSS selector to target a descendant of the element. For example if the pager class is on a table, you can set the selector-tbody to set the paginated elements as the tr elements within it. See the advanced example above for this.