ペィジ選択の個数を幅によって変更
This commit is contained in:
@@ -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)">|<</a>
|
<a class="page-link no-wrap" href="javascript: void (0)" onclick="Script.jumpTo (1)">|<</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 ?>)">>|</a>
|
<a class="page-link no-wrap" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">>|</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>
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user