Fixed #247 - JumpToPageDropdown

src/components/paginator/JumpToPageDropdown.vue

@@ -0,0 +1,35 @@
+<template>
+	<JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value"
+        @update:modelValue="onChange($event)" class="p-paginator-page-options"></JTPDropdown>
+</template>
+
+<script>
+import Dropdown from 'primevue/dropdown';
+
+export default {
+    name: 'JumpToPageDropdown',
+    inheritAttrs: false,
+    emits: ['page-change'],
+    props: {
+        page: Number,
+        pageCount: Number
+    },
+    methods: {
+        onChange(value) {
+            this.$emit('page-change', value);
+        }
+    },
+    computed: {
+        pageOptions() {
+            let opts = [];
+            for(let i= 0; i < this.pageCount; i++) {
+                opts.push({label: String(i), value: i})
+            }
+            return opts;
+        }
+    },
+    components: {
+        'JTPDropdown': Dropdown
+    }
+}
+</script>

src/components/paginator/Paginator.vue

@@ -13,6 +13,8 @@
                 :page="page" :pageCount="pageCount" :first="d_first" :rows="d_rows" :totalRecords="totalRecords" />
 			<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :rows="d_rows"
                 :options="rowsPerPageOptions" @rows-change="onRowChange($event)" />
+            <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :page="page" :pageCount="pageCount" 
+                @page-change="changePage($event)" />
         </template>
         <div class="p-paginator-right-content" v-if="$slots.right">
             <slot name="right" :state="currentState"></slot>
@@ -28,6 +30,7 @@ import NextPageLink from './NextPageLink.vue';
 import PageLinks from './PageLinks.vue';
 import PrevPageLink from './PrevPageLink.vue';
 import RowsPerPageDropdown from './RowsPerPageDropdown.vue';
+import JumpToPageDropdown from './JumpToPageDropdown.vue';
 
 export default {
     name: 'Paginator',
@@ -196,6 +199,7 @@ export default {
         'PageLinks': PageLinks,
         'PrevPageLink': PrevPageLink,
         'RowsPerPageDropdown': RowsPerPageDropdown,
+        'JumpToPageDropdown': JumpToPageDropdown
     }
 }
 </script>

src/components/paginator/RowsPerPageDropdown.vue

@@ -1,6 +1,6 @@
 <template>
 	<RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value"
-        @update:modelValue="onChange($event)"></RPPDropdown>
+        @update:modelValue="onChange($event)" class="p-paginator-rpp-options"></RPPDropdown>
 </template>
 
 <script>

src/views/datatable/DataTableDoc.vue

@@ -1934,7 +1934,7 @@ export default {
                             <td>paginatorTemplate</td>
                             <td>string</td>
                             <td>FirstPageLink PrevPageLink PageLinks <br /> NextPageLink LastPageLink RowsPerPageDropdown</td>
-                            <td>Template of the paginator.</td>
+                            <td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td>
                         </tr>
                         <tr>
                             <td>pageLinkSize</td>

src/views/dataview/DataViewDoc.vue

@@ -290,7 +290,7 @@ export default {
                         <td>paginatorTemplate</td>
                         <td>string</td>
                         <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
-                        <td>Template of the paginator.</td>
+                        <td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td>
                     </tr>
                     <tr>
                         <td>pageLinkSize</td>

src/views/paginator/PaginatorDoc.vue

@@ -53,6 +53,7 @@ import Paginator from 'primevue/paginator';
             <li>NextPageLink</li>
             <li>LastPageLink</li>
             <li>RowsPerPageDropdown</li>
+            <li>JumpToPageDropdown</li>
             <li>CurrentPageReport</li>
         </ul>
 

src/views/treetable/TreeTableDoc.vue

@@ -1324,7 +1324,7 @@ export default {
                         <td>paginatorTemplate</td>
                         <td>string</td>
                         <td>FirstPageLink PrevPageLink PageLinks <br /> NextPageLink LastPageLink RowsPerPageDropdown</td>
-                        <td>Template of the paginator.</td>
+                        <td>Template of the paginator. See the <router-link to="/paginator">Paginator</router-link> for all available options.</td>
                     </tr>
                     <tr>
                         <td>pageLinkSize</td>