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

broadcast/pagination.cmp.php

@@ -1,40 +1,40 @@
-    <nav class="d-flex justify-content-center" aria-label="...">
-        <ul class="pagination">
-            <?php if ($page > 1): ?>
-                <li class="page-item">
-                    <a class="page-link no-wrap" href="#" onclick="Script.jumpTo (1)">|&lt;</a>
-                </li>
-            <?php else: ?>
-                <li class="page-item disabled">
-                    <span class="page-link">|&lt;</span>
-                </li>
-            <?php endif ?>
-
-            <?php for ($i = max (min ($page + 2, $pages_max) - 4, 1); $i < $page; ++$i): ?>
-                <li class="page-item">
-                    <a class="page-link" href="#" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a>
-                </li>
-            <?php endfor ?>
+<nav class="d-flex justify-content-center" aria-label="...">
+    <ul class="pagination">
+        <?php if ($page > 1): ?>
+            <li class="page-item">
+                <a class="page-link no-wrap" href="javascript: void (0)" onclick="Script.jumpTo (1)">|&lt;</a>
+            </li>
+        <?php else: ?>
+            <li class="page-item disabled">
+                <span class="page-link">|&lt;</span>
+            </li>
+        <?php endif ?>
 
-            <li class="page-item active" aria-current="page">
-                <span class="page-link"><?= $page ?></span>
+        <?php for ($i = max (min ($page + 10, $pages_max) - 20, 1), $j = 9; $i < $page; ++$i, --$j): ?>
+            <li class="page-item page-<?= $j ?>">
+                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a>
             </li>
+        <?php endfor ?>
 
-            <?php for ($i = $page + 1; $i <= min (max ($page - 2, 1) + 4, $pages_max); ++$i): ?>
-                <li class="page-item">
-                    <a class="page-link" href="#" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a>
-                </li>
-            <?php endfor ?>
+        <li class="page-item active" aria-current="page">
+            <span class="page-link"><?= $page ?></span>
+        </li>
 
-            <?php if ($page < $pages_max): ?>
-                <li class="page-item">
-                    <a class="page-link no-wrap" href="#" onclick="Script.jumpTo (<?= $pages_max ?>)">&gt;|</a>
-                </li>
-            <?php else: ?>
-                <li class="page-item disabled">
-                    <span class="page-link">&gt;|</span>
-                </li>
-            <?php endif ?>
-        </ul>
-    </nav>
+        <?php for ($i = $page + 1, $j = 0; $i <= min (max ($page - 10, 1) + 20, $pages_max); ++$i, ++$j): ?>
+            <li class="page-item page-<?= $j ?>">
+                <a class="page-link" href="javascript: void (0)" onclick="Script.jumpTo (<?= $i ?>)"><?= $i ?></a>
+            </li>
+        <?php endfor ?>
+
+        <?php if ($page < $pages_max): ?>
+            <li class="page-item">
+                <a class="page-link no-wrap" href="javascript: void (0)" onclick="Script.jumpTo (<?= $pages_max ?>)">&gt;|</a>
+            </li>
+        <?php else: ?>
+            <li class="page-item disabled">
+                <span class="page-link">&gt;|</span>
+            </li>
+        <?php endif ?>
+    </ul>
+</nav>
 

broadcast/script.js

@@ -63,6 +63,9 @@ Script
 
     btnFilter.addEventListener ('click', filter);
     $ ('#btn-reset').on ('click', resetFilter);
+
+    $ (window).resize (this.setPagination);
+    this.setPagination ();
   }
 
   static
@@ -75,6 +78,21 @@ Script
 
     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;
+      }
+  }
 }