Pager componentAvailable since EcoComposer 2.2

Classical pager example :

Test1 Test2 Test3 Test4 Test5
Value 0 Value 1 Value 2 Value 3 Value 4
Value 5 Value 6 Value 7 Value 8 Value 9
Value 10 Value 11 Value 12 Value 13 Value 14
Value 15 Value 16 Value 17 Value 18 Value 19
Value 20 Value 21 Value 22 Value 23 Value 24
Value 25 Value 26 Value 27 Value 28 Value 29
Value 30 Value 31 Value 32 Value 33 Value 34
Value 35 Value 36 Value 37 Value 38 Value 39
Value 40 Value 41 Value 42 Value 43 Value 44
Value 45 Value 46 Value 47 Value 48 Value 49
Value 50 Value 51 Value 52 Value 53 Value 54
Value 55 Value 56 Value 57 Value 58 Value 59
Value 60 Value 61 Value 62 Value 63 Value 64
Value 65 Value 66 Value 67 Value 68 Value 69
Value 70 Value 71 Value 72 Value 73 Value 74
Value 75 Value 76 Value 77 Value 78 Value 79
Value 80 Value 81 Value 82 Value 83 Value 84
Value 85 Value 86 Value 87 Value 88 Value 89
Value 90 Value 91 Value 92 Value 93 Value 94
Value 95 Value 96 Value 97 Value 98 Value 99
Value 100 Value 101 Value 102 Value 103 Value 104
Value 105 Value 106 Value 107 Value 108 Value 109
Value 110 Value 111 Value 112 Value 113 Value 114
Value 115 Value 116 Value 117 Value 118 Value 119
Value 120 Value 121 Value 122 Value 123 Value 124
Value 125 Value 126 Value 127 Value 128 Value 129
Value 130 Value 131 Value 132 Value 133 Value 134
Value 135 Value 136 Value 137 Value 138 Value 139
Value 140 Value 141 Value 142 Value 143 Value 144
Value 145 Value 146 Value 147 Value 148 Value 149
Value 150 Value 151 Value 152 Value 153 Value 154
Value 155 Value 156 Value 157 Value 158 Value 159
Value 160 Value 161 Value 162 Value 163 Value 164
Value 165 Value 166 Value 167 Value 168 Value 169
Value 170 Value 171 Value 172 Value 173 Value 174
Value 175 Value 176 Value 177 Value 178 Value 179
Value 180 Value 181 Value 182 Value 183 Value 184
Value 185 Value 186 Value 187 Value 188 Value 189
Value 190 Value 191 Value 192 Value 193 Value 194
Value 195 Value 196 Value 197 Value 198 Value 199
Value 200 Value 201 Value 202 Value 203 Value 204
Value 205 Value 206 Value 207 Value 208 Value 209
Value 210 Value 211 Value 212 Value 213 Value 214
Value 215 Value 216 Value 217 Value 218 Value 219
Value 220 Value 221 Value 222 Value 223 Value 224
Value 225 Value 226 Value 227 Value 228 Value 229
Value 230 Value 231 Value 232 Value 233 Value 234
Value 235 Value 236 Value 237 Value 238 Value 239
Value 240 Value 241 Value 242 Value 243 Value 244
Value 245 Value 246 Value 247 Value 248 Value 249
Value 250 Value 251 Value 252 Value 253 Value 254
Value 255 Value 256 Value 257 Value 258 Value 259
Value 260 Value 261 Value 262 Value 263 Value 264
Value 265 Value 266 Value 267 Value 268 Value 269
Value 270 Value 271 Value 272 Value 273 Value 274
Value 275 Value 276 Value 277 Value 278 Value 279
Value 280 Value 281 Value 282 Value 283 Value 284
Value 285 Value 286 Value 287 Value 288 Value 289
Value 290 Value 291 Value 292 Value 293 Value 294
Value 295 Value 296 Value 297 Value 298 Value 299
Value 300 Value 301 Value 302 Value 303 Value 304
Value 305 Value 306 Value 307 Value 308 Value 309
Value 310 Value 311 Value 312 Value 313 Value 314
Value 315 Value 316 Value 317 Value 318 Value 319
Value 320 Value 321 Value 322 Value 323 Value 324
Value 325 Value 326 Value 327 Value 328 Value 329
Value 330 Value 331 Value 332 Value 333 Value 334
Value 335 Value 336 Value 337 Value 338 Value 339
Value 340 Value 341 Value 342 Value 343 Value 344
Value 345 Value 346 Value 347 Value 348 Value 349
Value 350 Value 351 Value 352 Value 353 Value 354
Value 355 Value 356 Value 357 Value 358 Value 359
Value 360 Value 361 Value 362 Value 363 Value 364
Value 365 Value 366 Value 367 Value 368 Value 369
Value 370 Value 371 Value 372 Value 373 Value 374
Value 375 Value 376 Value 377 Value 378 Value 379
Value 380 Value 381 Value 382 Value 383 Value 384
Value 385 Value 386 Value 387 Value 388 Value 389
Value 390 Value 391 Value 392 Value 393 Value 394
Value 395 Value 396 Value 397 Value 398 Value 399
Value 400 Value 401 Value 402 Value 403 Value 404
Value 405 Value 406 Value 407 Value 408 Value 409
Value 410 Value 411 Value 412 Value 413 Value 414
Value 415 Value 416 Value 417 Value 418 Value 419
Value 420 Value 421 Value 422 Value 423 Value 424
Value 425 Value 426 Value 427 Value 428 Value 429
Value 430 Value 431 Value 432 Value 433 Value 434
Value 435 Value 436 Value 437 Value 438 Value 439
Value 440 Value 441 Value 442 Value 443 Value 444
Value 445 Value 446 Value 447 Value 448 Value 449
Value 450 Value 451 Value 452 Value 453 Value 454
Value 455 Value 456 Value 457 Value 458 Value 459
Value 460 Value 461 Value 462 Value 463 Value 464
Value 465 Value 466 Value 467 Value 468 Value 469
Value 470 Value 471 Value 472 Value 473 Value 474
Value 475 Value 476 Value 477 Value 478 Value 479
Value 480 Value 481 Value 482 Value 483 Value 484
Value 485 Value 486 Value 487 Value 488 Value 489
Value 490 Value 491 Value 492 Value 493 Value 494
Value 495 Value 496 Value 497 Value 498 Value 499
Value 500 Value 501 Value 502 Value 503 Value 504
Value 505 Value 506 Value 507 Value 508 Value 509
Value 510 Value 511 Value 512 Value 513 Value 514
Value 515 Value 516 Value 517 Value 518 Value 519
Value 520 Value 521 Value 522 Value 523 Value 524
Value 525 Value 526 Value 527 Value 528 Value 529
Value 530 Value 531 Value 532 Value 533 Value 534
Value 535 Value 536 Value 537 Value 538 Value 539
Value 540 Value 541 Value 542 Value 543 Value 544
Value 545 Value 546 Value 547 Value 548 Value 549
Value 550 Value 551 Value 552 Value 553 Value 554
Value 555 Value 556 Value 557 Value 558 Value 559
Value 560 Value 561 Value 562 Value 563 Value 564
Value 565 Value 566 Value 567 Value 568 Value 569
Value 570 Value 571 Value 572 Value 573 Value 574
Value 575 Value 576 Value 577 Value 578 Value 579
Value 580 Value 581 Value 582 Value 583 Value 584
Value 585 Value 586 Value 587 Value 588 Value 589
Value 590 Value 591 Value 592 Value 593 Value 594
Value 595 Value 596 Value 597 Value 598 Value 599
Value 600 Value 601 Value 602 Value 603 Value 604
Value 605 Value 606 Value 607 Value 608 Value 609
Value 610 Value 611 Value 612 Value 613 Value 614
Value 615 Value 616 Value 617 Value 618 Value 619
Value 620 Value 621 Value 622 Value 623 Value 624
Value 625 Value 626 Value 627 Value 628 Value 629
Value 630 Value 631 Value 632 Value 633 Value 634
Value 635 Value 636 Value 637 Value 638 Value 639
Value 640 Value 641 Value 642 Value 643 Value 644
Value 645 Value 646 Value 647 Value 648 Value 649
Value 650 Value 651 Value 652 Value 653 Value 654
Value 655 Value 656 Value 657 Value 658 Value 659
Value 660 Value 661 Value 662 Value 663 Value 664
Value 665 Value 666 Value 667 Value 668 Value 669
Value 670 Value 671 Value 672 Value 673 Value 674
Value 675 Value 676 Value 677 Value 678 Value 679
Value 680 Value 681 Value 682 Value 683 Value 684
Value 685 Value 686 Value 687 Value 688 Value 689
Value 690 Value 691 Value 692 Value 693 Value 694
Value 695 Value 696 Value 697 Value 698 Value 699
Value 700 Value 701 Value 702 Value 703 Value 704
Value 705 Value 706 Value 707 Value 708 Value 709
Value 710 Value 711 Value 712 Value 713 Value 714
Value 715 Value 716 Value 717 Value 718 Value 719
Value 720 Value 721 Value 722 Value 723 Value 724
Value 725 Value 726 Value 727 Value 728 Value 729
Value 730 Value 731 Value 732 Value 733 Value 734
Value 735 Value 736 Value 737 Value 738 Value 739
Value 740 Value 741 Value 742 Value 743 Value 744
Value 745 Value 746 Value 747 Value 748 Value 749

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>
^