Pagination Ready

The pagination component makes it easy to display a list of page numbers for your users, so that they may navigate large datasets

The pagination component can be configured for most purposes and features a range og acessibility features for sighted and non-sighted users

Examples #

<duet-layout center>
  <div slot="main">
    <duet-card heading="Default pagination">
      <duet-pagination></duet-pagination>

    </duet-card>
  </div>
</duet-layout>
<script>
  const paginator = document.querySelector('duet-pagination');


  paginator.addEventListener('duetPageChange', (e) => {
    console.log(e.detail);
  });


</script>

<duet-layout center>
  <div slot="main">
    <duet-card heading="large pagination list">
      <duet-pagination total="10000" take="5" visible-items="70"></duet-pagination>

    </duet-card>
  </div>
</duet-layout>
<script>
  const paginator = document.querySelector('duet-pagination');


  paginator.addEventListener('duetPageChange', (e) => {
    console.log(e.detail);
  });


</script>

<duet-layout center>
  <div slot="main">
    <duet-card heading="Setting current pagination">
      <duet-pagination current="23"></duet-pagination>

    </duet-card>
  </div>
</duet-layout>
<script>
  const paginator = document.querySelector('duet-pagination');


  paginator.addEventListener('duetPageChange', (e) => {
    console.log(e.detail);
  });


</script>

<duet-layout center>
  <div slot="main">
    <duet-card heading="Default pagination">
      <duet-pagination
        total="10"
        take="1"
        current="1"
        page-links='[
          "/test-1",
          "/test-2",
          "/test-3",
          "/test-4",
          "/test-5",
          "/test-6",
          "/test-7",
          "/test-8",
          "/test-9",
          "/test-10"
        ]'
      ></duet-pagination>
    </duet-card>
  </div>
</duet-layout>
<script>
  const paginator = document.querySelector('duet-pagination');

  paginator.addEventListener('duetPageChange', (e) => {
    console.log(e.detail);
  });
</script>

Properties #

Events #

Shadow Parts #

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.