Pager componentAvailable since EcoComposer 2.2
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.
-2is 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>▼︎</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>