Merge pull request #2575 from triasrahman/develop

Enhance usability of list pagination.

modules/backend/lang/en/lang.php

@@ -165,6 +165,8 @@ return [
         'behavior_not_ready' => 'List behavior has not been initialized, check that you have called makeLists() in your controller.',
         'invalid_column_datetime' => "Column value ':column' is not a DateTime object, are you missing a \$dates reference in the Model?",
         'pagination' => 'Displayed records: :from-:to of :total',
+        'first_page' => 'First page',
+        'last_page' => 'Last page',
         'prev_page' => 'Previous page',
         'next_page' => 'Next page',
         'refresh' => 'Refresh',

modules/backend/widgets/lists/partials/_list_pagination.htm

@@ -1,8 +1,22 @@
-<div class="loading-indicator-container size-small pull-right">
+<div class="loading-indicator-container size-small">
     <div class="control-pagination">
         <span class="page-iteration">
             <?= e(trans('backend::lang.list.pagination', ['from' => $pageFrom, 'to' => $pageTo, 'total' => $recordTotal])) ?>
         </span>
+        <?php if ($pageCurrent > 2): ?>
+        <a
+            href="javascript:;"
+            class="page-first"
+            data-request="<?= $this->getEventHandler('onPaginate') ?>"
+            data-request-data="page: 1"
+            data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
+            title="<?= e(trans('backend::lang.list.first_page')) ?>"></a>
+        <?php else: ?>
+        <span
+            href="javascript:;"
+            class="page-first"
+            title="<?= e(trans('backend::lang.list.first_page')) ?>"></span>
+        <?php endif ?>
         <?php if ($pageCurrent > 1): ?>
         <a
             href="javascript:;"
@@ -11,7 +25,21 @@
             data-request-data="page: <?= $pageCurrent-1 ?>"
             data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
             title="<?= e(trans('backend::lang.list.prev_page')) ?>"></a>
+        <?php else: ?>
+        <span
+            href="javascript:;"
+            class="page-back"
+            title="<?= e(trans('backend::lang.list.prev_page')) ?>"></span>
         <?php endif ?>
+        <select
+            name="page"
+            class="form-control input-sm custom-select"
+            data-request="<?= $this->getEventHandler('onPaginate') ?>"
+            data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>">
+            <?php for($i = 1; $i <= $pageLast ; $i++): ?>
+            <option value="<?= $i ?>" <?= $i === $pageCurrent ? 'selected' : '' ?>><?= $i ?></option>
+            <?php endfor ?>
+        </select>
         <?php if ($pageLast > $pageCurrent): ?>
         <a
             href="javascript:;"
@@ -20,6 +48,25 @@
             data-request="<?= $this->getEventHandler('onPaginate') ?>"
             data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
             title="<?= e(trans('backend::lang.list.next_page')) ?>"></a>
+        <?php else: ?>
+        <span
+            href="javascript:;"
+            class="page-next"
+            title="<?= e(trans('backend::lang.list.next_page')) ?>"></span>
+        <?php endif ?>
+        <?php if ($pageLast > $pageCurrent + 1): ?>
+        <a
+            href="javascript:;"
+            class="page-last"
+            data-request-data="page: <?= $pageLast ?>"
+            data-request="<?= $this->getEventHandler('onPaginate') ?>"
+            data-load-indicator="<?= e(trans('backend::lang.list.loading')) ?>"
+            title="<?= e(trans('backend::lang.list.last_page')) ?>"></a>
+        <?php else: ?>
+        <span
+            href="javascript:;"
+            class="page-last"
+            title="<?= e(trans('backend::lang.list.last_page')) ?>"></span>
         <?php endif ?>
     </div>
 </div>

modules/system/assets/ui/less/pagination.less

@@ -20,40 +20,62 @@
 
 .control-pagination {
     font-size: 0;
+    text-align: center;
+    @media (min-width: @screen-sm-min) {
+        text-align: right;
+    }
     .page-iteration {
         margin-right: 4px;
         font-size: @font-size-base - 1;
         color: @color-pagination;
+        display: block;
+        @media (min-width: @screen-sm-min) {
+            display: inline-block;
         }
-    .page-next, .page-back {
+    }
+    select, .select2-container {
+        width: 80px;
+        text-align: center;
+        display: inline-block;
+        vertical-align: bottom;
+        bottom: 4px;
+
+        .select2-selection--single {
+            height: auto;
+            padding: 4px 25px 4px 4px;
+        }
+    }
+    .page-next, .page-back, .page-last, .page-first {
         display: inline-block;
         padding: 10px 15px;
         &:before {
             color: @color-pagination-icon;
-            font-size: 19px;
+            font-size: 24px;
-            line-height: 19px;
+            line-height: 24px;
             display: inline-block;
             vertical-align: baseline;
             position: relative;
             top: 2px;
         }
     }
-    a.page-next, a.page-back {
+    a.page-next, a.page-back, a.page-last, a.page-first {
         &:hover:before {
             color: @color-pagination-hover;
         }
     }
-    span.page-next, span.page-back {
+    span.page-next, span.page-back, span.page-last, span.page-first {
         &:before {
             color: @color-pagination-inactive;
         }
     }
-    .page-next {
+    .page-last {
         padding-left: 6px;
     }
-    .page-back {
+    .page-first {
         padding-right: 6px;
     }
     .page-next:before { .icon(@angle-right); }
     .page-back:before { .icon(@angle-left); }
+    .page-last:before { .icon(@angle-double-right); }
+    .page-first:before { .icon(@angle-double-left); }
 }