スマホ向けページャーでページジャンプを可能にした

public/css/tissue.css

@@ -53,6 +53,13 @@
     border-bottom: 1px solid rgba(0, 0, 0, .125);
 }
 
+.tis-page-selector {
+    margin-left: -1px;
+    width: calc(100% + 2px);
+    border: 1px solid #dee2e6;
+    border-radius: 0;
+}
+
 @media (min-width: 992px) {
     .tis-sidebar-info {
         font-size: small;

public/js/tissue.js

@@ -46,4 +46,10 @@
         });
     };
 
+    $.fn.pageSelector = function () {
+        return this.on('change', function () {
+            location.href = $(this).find(':selected').data('href');
+        });
+    };
+
 })(jQuery);

resources/views/layouts/base.blade.php

@@ -160,6 +160,7 @@
         @endguest
         $('[data-toggle="tooltip"]').tooltip();
         $('.alert').alert();
+        $('.tis-page-selector').pageSelector();
         @if (session('status'))
         setTimeout(function () {
             $('#status').alert('close');

resources/views/vendor/pagination/default.blade.php

@@ -42,7 +42,13 @@
             <li class="page-item w-25 text-center"><a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">&laquo;</a></li>
         @endif
 
-        <li class="page-item w-25 text-center"><span class="page-link">{{ $paginator->currentPage() }}</span></li>
+        <li class="page-item w-25 text-center">
+            <select class="custom-select tis-page-selector" aria-label="Page">
+                @for ($i = 1; $i <= $paginator->lastPage(); $i++)
+                    <option value="{{ $i }}" {{ $i === $paginator->currentPage() ? 'selected' : '' }} data-href="{{ $paginator->url($i) }}">{{ $i }}</option>
+                @endfor
+            </select>
+        </li>
 
         @if ($paginator->hasMorePages())
             <li class="page-item w-25 text-center"><a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">&raquo;</a></li>