ペィジ選択の個数を幅によって変更

This commit is contained in:
2024-02-28 02:44:25 +09:00
parent a99b730397
commit 7de05c2af5
2 changed files with 54 additions and 36 deletions
+10 -10
View File
@@ -1,8 +1,8 @@
<nav class="d-flex justify-content-center" aria-label="..."> <nav class="d-flex justify-content-center" aria-label="...">
<ul class="pagination"> <ul class="pagination">
<?php if ($page > 1): ?> <?php if ($page > 1): ?>
<li class="page-item"> <li class="page-item">
<a class="page-link no-wrap" href="#" onclick="Script.jumpTo (1)">|&lt;</a> <a class="page-link no-wrap" href="javascript: void (0)" onclick="Script.jumpTo (1)">|&lt;</a>
</li> </li>
<?php else: ?> <?php else: ?>
<li class="page-item disabled"> <li class="page-item disabled">
@@ -10,9 +10,9 @@
</li> </li>
<?php endif ?> <?php endif ?>
<?php for ($i = max (min ($page + 2, $pages_max) - 4, 1); $i < $page; ++$i): ?> <?php for ($i = max (min ($page + 10, $pages_max) - 20, 1), $j = 9; $i < $page; ++$i, --$j): ?>
<li class="page-item"> <li class="page-item page-<?= $j ?>">
<a class="page-link" href="#" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a> <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a>
</li> </li>
<?php endfor ?> <?php endfor ?>
@@ -20,15 +20,15 @@
<span class="page-link"><?= $page ?></span> <span class="page-link"><?= $page ?></span>
</li> </li>
<?php for ($i = $page + 1; $i <= min (max ($page - 2, 1) + 4, $pages_max); ++$i): ?> <?php for ($i = $page + 1, $j = 0; $i <= min (max ($page - 10, 1) + 20, $pages_max); ++$i, ++$j): ?>
<li class="page-item"> <li class="page-item page-<?= $j ?>">
<a class="page-link" href="#" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a> <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a>
</li> </li>
<?php endfor ?> <?php endfor ?>
<?php if ($page < $pages_max): ?> <?php if ($page < $pages_max): ?>
<li class="page-item"> <li class="page-item">
<a class="page-link no-wrap" href="#" onclick="Script.jumpTo (<?= $pages_max ?>)">&gt;|</a> <a class="page-link no-wrap" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">&gt;|</a>
</li> </li>
<?php else: ?> <?php else: ?>
<li class="page-item disabled"> <li class="page-item disabled">
@@ -36,5 +36,5 @@
</li> </li>
<?php endif ?> <?php endif ?>
</ul> </ul>
</nav> </nav>
+18
View File
@@ -63,6 +63,9 @@ Script
btnFilter.addEventListener ('click', filter); btnFilter.addEventListener ('click', filter);
$ ('#btn-reset').on ('click', resetFilter); $ ('#btn-reset').on ('click', resetFilter);
$ (window).resize (this.setPagination);
this.setPagination ();
} }
static static
@@ -75,6 +78,21 @@ Script
window.location.href = url; window.location.href = url;
} }
static
setPagination ()
{
for (let i = 0; i < 10; ++i)
$ (`.page-${i}`).removeClass ('d-none');
for (let i = 9; i > 0; --i)
{
if ($ ('.pagination').width () >= $ ('body').width () * .8)
$ (`.page-${i}`).addClass ('d-none');
else
break;
}
}
} }