Newer
Older
<div class="row mt-4" v-if="paginatedPanel !== null && paginatedPanel.totalItems > 0">
<div class="col-md-8">
<b-pagination v-model="paginatedPanel.currentPage" :total-rows="paginatedPanel.totalItems" :per-page="paginatedPanel.pageSize" aria-controls="groups-list" align="center" v-on:change="setPage"></b-pagination>
<p>Total items: {{paginatedPanel.totalItems}}</p>
<div class="col-md-4">
<b-row>
<b-col sm="5">
<label for="page-size" class="mt-2">Page size:</label>
<b-form-select id="page-size" v-model="paginatorInput.paginatorPageSize" :options="pageSizeOptions" v-on:change="changePageSize"></b-form-select>
</b-col>
</b-row>
</div>
</div>
</template>
<script>
export default {
name: 'Paginator',
props: {
paginatedPanel: Object,
onUpdate: Function,
paginatorInput: Object
pageSizeOptions: [{
value: 5,
text: "5"
},
{
value: 20,
text: "20"
},
{
value: 50,
text: "50"
},
{
value: 100,
text: "100"
}
]
};
},
methods: {
setPage: function(page) {
this.paginatorInput.paginatorPage = page;
this.onUpdate();
},
changePageSize: function(pageSize) {
this.paginatorInput.paginatorPageSize = pageSize;
this.onUpdate();
}
}
}
</script>