Dynamic Variables | Header & Footer

Page Number Variable

Use {page} to display the current page number:

PaginationPlus.configure({
  headerRight: "Page {page}",
  footerRight: "Page {page}",
})

Basic Usage

The {page} variable is automatically replaced with the current page number:

PaginationPlus.configure({
  headerRight: "Page {page}",
  footerRight: "Page {page}",
})

Example with Rich Text

You can combine variables with HTML formatting:

PaginationPlus.configure({
  footerRight: `<span style="font-weight: bold;">Page {page}</span>`,
})

Common Patterns

Simple Page Numbers

headerRight: "Page {page}",
footerRight: "Page {page}",

Page Numbers with Text

headerRight: "Page {page}",
footerRight: "Page {page} of Document",

Using Variables in Multiline Content

Variables work seamlessly with multiline content:

PaginationPlus.configure({
  footerRight: `<p>Page {page}<br>
<small>Generated: ${new Date().toLocaleDateString()}</small></p>`,
})

Using Variables with Rich Text

Combine variables with HTML styling:

PaginationPlus.configure({
  headerRight: `<span style="color: blue; font-weight: 600;">Page {page}</span>`,
  footerRight: `<p style="margin: 0;">Page {page}<br>
<small style="color: #6b7280;">Footer Text</small></p>`,
})

Related Topics

• Basic Usage - Learn the basics of configuration
• Rich Text Support - Style your variables with HTML
• Complete Examples - See variables in real-world examples