Pager componentAvailable since EcoComposer 2.2

Pager examples
Default SCSS values
SCSS implementation
HTML implementation

Classical pager example :

Product Name	Category	Price (€)	Stock	Status
Product 1	Books	19.99	17	In Stock
Product 2	Electronics	22.49	11	In Stock
Product 3	Books	24.99	20	In Stock
Product 4	Electronics	27.49	15	In Stock
Product 5	Books	29.99	45	In Stock
Product 6	Electronics	32.49	30	In Stock
Product 7	Books	34.99	19	In Stock
Product 8	Electronics	37.49	2	In Stock
Product 9	Books	39.99	0	Out of Stock
Product 10	Electronics	42.49	47	In Stock
Product 11	Books	44.99	9	In Stock
Product 12	Electronics	47.49	12	In Stock
Product 13	Books	49.99	32	In Stock
Product 14	Electronics	52.49	49	In Stock
Product 15	Books	54.99	21	In Stock
Product 16	Electronics	57.49	34	In Stock
Product 17	Books	59.99	46	In Stock
Product 18	Electronics	62.49	22	In Stock
Product 19	Books	64.99	6	In Stock
Product 20	Electronics	67.49	13	In Stock
Product 21	Books	69.99	19	In Stock
Product 22	Electronics	72.49	38	In Stock
Product 23	Books	74.99	1	In Stock
Product 24	Electronics	77.49	27	In Stock
Product 25	Books	79.99	6	In Stock
Product 26	Electronics	82.49	10	In Stock
Product 27	Books	84.99	47	In Stock
Product 28	Electronics	87.49	1	In Stock
Product 29	Books	89.99	22	In Stock
Product 30	Electronics	92.49	32	In Stock
Product 31	Books	94.99	29	In Stock
Product 32	Electronics	97.49	26	In Stock
Product 33	Books	99.99	1	In Stock
Product 34	Electronics	102.49	21	In Stock
Product 35	Books	104.99	49	In Stock
Product 36	Electronics	107.49	33	In Stock
Product 37	Books	109.99	20	In Stock
Product 38	Electronics	112.49	13	In Stock
Product 39	Books	114.99	17	In Stock
Product 40	Electronics	117.49	7	In Stock
Product 41	Books	119.99	7	In Stock
Product 42	Electronics	122.49	34	In Stock
Product 43	Books	124.99	39	In Stock
Product 44	Electronics	127.49	29	In Stock
Product 45	Books	129.99	35	In Stock
Product 46	Electronics	132.49	14	In Stock
Product 47	Books	134.99	27	In Stock
Product 48	Electronics	137.49	21	In Stock
Product 49	Books	139.99	28	In Stock
Product 50	Electronics	142.49	21	In Stock
Product 51	Books	144.99	1	In Stock
Product 52	Electronics	147.49	25	In Stock
Product 53	Books	149.99	31	In Stock
Product 54	Electronics	152.49	13	In Stock
Product 55	Books	154.99	28	In Stock
Product 56	Electronics	157.49	49	In Stock
Product 57	Books	159.99	27	In Stock
Product 58	Electronics	162.49	20	In Stock
Product 59	Books	164.99	22	In Stock
Product 60	Electronics	167.49	24	In Stock
Product 61	Books	169.99	22	In Stock
Product 62	Electronics	172.49	14	In Stock
Product 63	Books	174.99	45	In Stock
Product 64	Electronics	177.49	15	In Stock
Product 65	Books	179.99	43	In Stock
Product 66	Electronics	182.49	43	In Stock
Product 67	Books	184.99	11	In Stock
Product 68	Electronics	187.49	8	In Stock
Product 69	Books	189.99	10	In Stock
Product 70	Electronics	192.49	29	In Stock
Product 71	Books	194.99	50	In Stock
Product 72	Electronics	197.49	3	In Stock
Product 73	Books	199.99	37	In Stock
Product 74	Electronics	202.49	42	In Stock
Product 75	Books	204.99	10	In Stock
Product 76	Electronics	207.49	3	In Stock
Product 77	Books	209.99	2	In Stock
Product 78	Electronics	212.49	16	In Stock
Product 79	Books	214.99	17	In Stock
Product 80	Electronics	217.49	5	In Stock
Product 81	Books	219.99	10	In Stock
Product 82	Electronics	222.49	46	In Stock
Product 83	Books	224.99	0	Out of Stock
Product 84	Electronics	227.49	24	In Stock
Product 85	Books	229.99	3	In Stock
Product 86	Electronics	232.49	29	In Stock
Product 87	Books	234.99	29	In Stock
Product 88	Electronics	237.49	11	In Stock
Product 89	Books	239.99	13	In Stock
Product 90	Electronics	242.49	28	In Stock
Product 91	Books	244.99	31	In Stock
Product 92	Electronics	247.49	48	In Stock
Product 93	Books	249.99	11	In Stock
Product 94	Electronics	252.49	5	In Stock
Product 95	Books	254.99	3	In Stock
Product 96	Electronics	257.49	36	In Stock
Product 97	Books	259.99	5	In Stock
Product 98	Electronics	262.49	36	In Stock
Product 99	Books	264.99	21	In Stock
Product 100	Electronics	267.49	38	In Stock
Product 101	Books	269.99	24	In Stock
Product 102	Electronics	272.49	24	In Stock
Product 103	Books	274.99	30	In Stock
Product 104	Electronics	277.49	3	In Stock
Product 105	Books	279.99	11	In Stock
Product 106	Electronics	282.49	20	In Stock
Product 107	Books	284.99	25	In Stock
Product 108	Electronics	287.49	7	In Stock
Product 109	Books	289.99	15	In Stock
Product 110	Electronics	292.49	28	In Stock
Product 111	Books	294.99	20	In Stock
Product 112	Electronics	297.49	1	In Stock
Product 113	Books	299.99	5	In Stock
Product 114	Electronics	302.49	29	In Stock
Product 115	Books	304.99	21	In Stock
Product 116	Electronics	307.49	43	In Stock
Product 117	Books	309.99	11	In Stock
Product 118	Electronics	312.49	18	In Stock
Product 119	Books	314.99	10	In Stock
Product 120	Electronics	317.49	37	In Stock
Product 121	Books	319.99	21	In Stock
Product 122	Electronics	322.49	7	In Stock
Product 123	Books	324.99	33	In Stock
Product 124	Electronics	327.49	31	In Stock
Product 125	Books	329.99	50	In Stock
Product 126	Electronics	332.49	8	In Stock
Product 127	Books	334.99	44	In Stock
Product 128	Electronics	337.49	20	In Stock
Product 129	Books	339.99	39	In Stock
Product 130	Electronics	342.49	20	In Stock
Product 131	Books	344.99	13	In Stock
Product 132	Electronics	347.49	41	In Stock
Product 133	Books	349.99	1	In Stock
Product 134	Electronics	352.49	1	In Stock
Product 135	Books	354.99	20	In Stock
Product 136	Electronics	357.49	40	In Stock
Product 137	Books	359.99	35	In Stock
Product 138	Electronics	362.49	22	In Stock
Product 139	Books	364.99	50	In Stock
Product 140	Electronics	367.49	29	In Stock
Product 141	Books	369.99	38	In Stock
Product 142	Electronics	372.49	44	In Stock
Product 143	Books	374.99	48	In Stock
Product 144	Electronics	377.49	22	In Stock
Product 145	Books	379.99	35	In Stock
Product 146	Electronics	382.49	49	In Stock
Product 147	Books	384.99	45	In Stock
Product 148	Electronics	387.49	32	In Stock
Product 149	Books	389.99	15	In Stock
Product 150	Electronics	392.49	17	In Stock

The default values are :

all-pages-width : 21rem * theming.$font-size,
border-radius : .4rem * theming.$font-size,
height : 3.4rem * theming.$font-size,
margin-top : 2rem * theming.$font-size,
font-family : theming.$font-family,
pager--disabled-color : 'pager--disabled-color',
pager--disabled--non-active--page--background-color : 'pager--disabled--non-active--page--background-color',
pager--disabled--non-active--page--border-color : 'pager--disabled--non-active--page--border-color',
pager--hover--page--background-color : 'pager--hover--page--background-color',
pager--hover--page--border-color : 'pager--hover--page--border-color',
pager--hover--page--color : 'pager--hover--page--color',
pager--non-active--page--background-color : 'pager--non-active--page--background-color',
pager--non-active--page--color : 'pager--non-active--page--color',
pager--active--page--background-color : 'pager--active--page--background-color',
pager--active--page--border-color : 'pager--active--page--border-color',
pager--active--page--color : 'pager--active--page--color',
pager--active--page--text-shadow : 'pager--active--page--text-shadow',
pager--indications--color : 'pager--indications--color',
// jump
pager--jump--background-color : 'pager--jump--background-color',
pager--jump--border : 'pager--jump--border',
pager--jump--color : 'pager--jump--color',
pager--jump--placeholder--color : 'pager--jump--placeholder--color',
print : false,
suffix : '',
themes :  (
  light : (
    default--pager--disabled-color : #555,
    default--pager--disabled--non-active--page--background-color : #fff,
    default--pager--disabled--non-active--page--border-color : #ddd,
    default--pager--hover--page--background-color : #eee,
    default--pager--hover--page--border-color : #ddd,
    default--pager--hover--page--color : #2a6496,
    default--pager--non-active--page--background-color : #fff,
    default--pager--non-active--page--color : #05a,
    default--pager--active--page--background-color : #05a,
    default--pager--active--page--border-color : #05a,
    default--pager--active--page--color : #fff,
    default--pager--active--page--text-shadow : 0 0 .2rem * theming.$font-size #eee,
    default--pager--indications--color : #444,
    default--pager--jump--background-color : #fff,
    default--pager--jump--border : .1rem * theming.$font-size solid #ddd,
    default--pager--jump--color : #444,
    default--pager--jump--placeholder--color : #444,
  ),
  dark : (
    default--pager--disabled-color : #999,
    default--pager--disabled--non-active--page--background-color : #333,
    default--pager--disabled--non-active--page--border-color : #555,
    default--pager--hover--page--background-color : #18f,
    default--pager--hover--page--border-color : #444,
    default--pager--hover--page--color : #eee,
    default--pager--non-active--page--background-color : #333,
    default--pager--non-active--page--color : #bdf,
    default--pager--active--page--background-color : #7bf,
    default--pager--active--page--border-color : #7bf,
    default--pager--active--page--color : #000,
    default--pager--active--page--text-shadow : 0 0 .2rem * theming.$font-size #eee,
    default--pager--indications--color : #ddd,
    default--pager--jump--background-color : #333,
    default--pager--jump--border : .1rem * theming.$font-size solid #ddd,
    default--pager--jump--color : #eee,
    default--pager--jump--placeholder--color : #fff
  )
)

We can implement it that way :

@include pager.init();
@include pager.create();

We can implement it that way :

The only thing relevant for this component in the table is the structure and the class -pager-tbody.

Beware as there are a lot of PHP code here.

-2

is the suffix here.

<table class="table suffix-2">
  <thead class=table-header>
    <th>Test1</th>
    <th>Test2</th>
    <th>Test3</th>
    <th>Test4</th>
    <th>Test5</th>
  </thead>
  <tbody class=-pager-tbody>
    <?php
    for ($actualRow = 0; $actualRow < COUNT; ++$actualRow)
    {
      ?>
    <tr<?php if ($actualRow > LIMIT - 1)
    {?> class=pager--hidden<?php
    }?>>
      <?php $rowShowed = $actualRow * 5; ?>
      <td data-label=Test1>Value <?= $rowShowed ?></td>
      <td data-label=Test2>Value <?= $rowShowed + 1 ?></td>
      <td data-label=Test3>Value <?= $rowShowed + 2 ?></td>
      <td data-label=Test4>Value <?= $rowShowed + 3 ?></td>
      <td data-label=Test5>Value <?= $rowShowed + 4 ?></td>
      </tr><?php
    }
  </tbody>
</table><?php
const
  PAGE = 1,
  LIMITS = ['15', '50', '100'],
  NB_VISIBLE_PAGES = 6,
  OFFSET = ((PAGE - 1) * LIMIT) + 1;

$nbPages = ceil(COUNT / LIMIT);
$somePageButtonsWillBeHidden = $nbPages > NB_VISIBLE_PAGES;
?><nav class=pager>
  <ul class="pager--buttons--container pager-left">
    <li id=first<?php if (PAGE < 2) {?>class=disabled<?php } ?>><a>Start</a></li>
    <li id=previous<?php if (PAGE < 2) {?>class=disabled<?php } ?>><a>«</a></li>
  </ul>

  <div id=pager--overflow-container>
    <ul class="pager--buttons--container pager-center<?php
    if ($somePageButtonsWillBeHidden) echo ' pager-center-style' ?>">
      <?php
      for ($index = 1; $index <= $nbPages; ++$index)
      {
        ?><li<?php if ($index === PAGE) echo ' class=active' ?>><a><?= $index ?></a></li><?php
      }?>
    </ul>
  </div>

  <ul class="pager--buttons--container -pager--pages-container"><?php
    if ($nbPages > NB_VISIBLE_PAGES)
    {
      ?><li id=dots><a>...</a></li><?php
      ?><li id=jump><input id=jump-input placeholder=# /></li><?php
    }

    if (1 !== $nbPages) {
      ?><li id=next<?php if (PAGE == $nbPages) { ?>class=disabled<?php }
        ?>><a>»</a></li>
      <?php
    }

    if ($nbPages > 1)
    {
      ?><li id=last<?php if (PAGE === $nbPages) {?>class=disabled<?php }?>><a>End</a></li><?php
    }
  ?></ul><?php
  $lastShown = OFFSET + (LIMIT - 1);

  if ($lastShown > COUNT)
    $lastShown = COUNT;

  ?><div id=indications class=gray>
    <?= OFFSET ?> - <?= $lastShown ?> / <span id=count><?= COUNT ?>    </span>
  </div>

  <div class="select select-container gray">
    <button type=button role=select class="select select-value" aria-labelledby=pager--limit>
      <span id=pager--limit class="select select-value--label"><?= LIMITS[0] ?></span>
      <span>&#x25bc;&#xfe0e;</span>
    </button>

    <div class="select select-list limit-container--select"><?php
      foreach (LIMITS as $option)
      {
        ?>
        <input type=radio role=menuitem id=chk-<?= $option ?>-option name=select-radio
               class="select select-item--activator" value=<?= $option ?><?php
        if ($option === (string) LIMIT)
          echo ' checked';
        ?>/>
        <label for=chk-<?= $option ?>-option class="select select-item--label"><?= $option ?></label><?php
      }
      ?></div>
  </div>

  <span class=pager--by-page>by page</span>
</nav>