I'm using Vue-good-table remote search, I have got an issue when I'm searching on the second page. Search page automatically set to second page, but pagination set to the first page. I tried to set the page manually by setCurrentPage but it's not working. Here is my code.
<vue-good-table
mode="remote"
:line-numbers="true"
:search-options="{
enabled: true,
placeholder: 'Search this table',
searchFn: searchTbl
}"
:select-options="{
enabled: true,
selectionInfoClass: 'table-alert__box'
}"
:pagination-options="{
enabled: true,
mode: 'records'
}"
style-class="tableOne vgt-table"
:rows="rows"
@on-selected-rows-change="selectionChanged"
:columns="columns"
@on-page-change="onPageChange"
:total-rows="totalRecords"
@on-sort-change="onSortChange"
@on-column-filter="onColumnFilter"
@on-per-page-change="onPerPageChange"
@on-search="searchTbl"
>
<div slot="table-actions" class="mb-3">
<b-button class="form-btn" type="submit" variant="success" @click="loadItems">Refresh</b-button>
</div>
<div slot="selected-row-actions" class="mb-3">
<b-button variant="danger">Delete</b-button>
</div>
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'button'">
<a href @click.prevent="editRecord(props.row)">
<i class="i-Eraser-2 text-25 text-success mr-2" />
{{ props.row.button }}
</a>
<a href @click.prevent="confirmMsg(props.row)">
<i class="i-Close-Window text-25 text-danger" />
{{ props.row.button }}
</a>
</span>
</template>
</vue-good-table>
data() {
return {
pagination:{
enabled: true,
mode: 'records',
setCurrentPage: 1,
}
}
}
This is the search and data loading to table functions, with loadItems function I'm setting setCurrentPage value and it's setting correctly.
searchTbl(searchTerm){
this.updateParams({
columnFilters: {
search: searchTerm,
},
});
this.loadItems()
},
loadItems() {
this.pagination.setCurrentPage = this.ahStore.tblData.currentPage;
console.log(this.pagination.setCurrentPage)
this.$store.dispatch('getFromServer', this.serverParams)
.then((response) => {
this.totalRecords = this.ahStore.tblData.totalRecords;
this.rows = this.ahStore.tblData.rows;
})
.catch((err) => {
console.log(err)
});
},
