Pager componentAvailable since EcoComposer 2.2

Classical pager example :

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

The defaults 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> code style="color: #000000"> <?php for ($actualRow = 0; $actualRow < COUNT; ++$actualRow) { ?> <?php if ($actualRow > LIMIT - 1) {?>class=pager--hiddencode style="color: #000000"><?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>code style="color: #000000"><?php } </tbody> </table>code style="color: #000000"><?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=firstcode style="color: #000000"><?php if (PAGE < 2) {?>class=disabledcode style="color: #000000"><?php } ?><a>Start</a></li> <li id=previouscode style="color: #000000"><?php if (PAGE < 2) {?>class=disabledcode style="color: #000000"><?php } ?><a>«</a></li> </ul> <div id=pager--overflow-container> <ul class="pager--buttons--container pager-centercode style="color: #000000"><?php if ($somePageButtonsWillBeHidden) echo ' pager-center-style' ?> <?php for ($index = 1; $index <= $nbPages; ++$index) { ?><?php if ($index === PAGE) echo ' class=active' ?><a>code style="color: #000000"><?= $index ?></a></li>code style="color: #000000"><?php }?> </ul> </div> <ul class="pager--buttons--container -pager--pages-container">code style="color: #000000"><?php if ($nbPages > NB_VISIBLE_PAGES) { ?><li id=dots><a>...</a></li>code style="color: #000000"><?php ?><li id=jump><input id=jump-input placeholder=# /></li>code style="color: #000000"><?php } if (1 !== $nbPages) { ?>id=nextcode style="color: #000000"><?php if (PAGE == $nbPages) { ?>class=disabledcode style="color: #000000"><?php } ?><a>»</a></li> code style="color: #000000"> <?php } if ($nbPages > 1) { ?>id=lastcode style="color: #000000"><?php if (PAGE === $nbPages) {?>class=disabledcode style="color: #000000"><?php }?><a>End</a></li>code style="color: #000000"><?php } ?></ul>code style="color: #000000"><?php $lastShown = OFFSET + (LIMIT - 1); if ($lastShown > COUNT) $lastShown = COUNT; ?><div id=indications class=gray> code style="color: #000000"> <?= OFFSET ?><?= $lastShown ?><span id=count>code style="color: #000000"><?= 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">code style="color: #000000"><?= LIMITS[0] ?></span> <span>&#x25bc;&#xfe0e;</span> </button> <div class="select select-list limit-container--select">code style="color: #000000"><?php foreach (LIMITS as $option) { ?> type=radio role=menuitem id=chk-code style="color: #000000"><?= $option ?>name=select-radio class="select select-item--activator" value=code style="color: #000000"><?= $option ?><?php if ($option === (string) LIMIT) echo ' checked'; ?>for=chk-code style="color: #000000"><?= $option ?>class="select select-item--label">code style="color: #000000"><?= $option ?></label>code style="color: #000000"><?php } ?></div> </div> <span class=pager--by-page>by page</span> </nav>
^