I implemented server side search and pagination with Vue data-table (v-data-table). When I start typing in the search bar, at first with only an 'n' it returns 55 pages, which is correct and I can move through the pages with next/previous button. But when the search is 'ni' and only returns 25 items (it calculates correctly this should be 3 pages) my next button is disabled... see below. Does anybody have an idea of where this goes wrong. I also attached my code starting with the data-table template...
<v-data-table
:headers="headers"
:items="all_items"
:search="search"
height="300px"
:server-items-length="totalPages"
fixed-header
:items-per-page="10"
:page="page"
:options.sync="options"
@update:options="onOptionsChanged"
></v-data-table>
</v-card>
</v-container>
</template>
<script>
import axios from "axios";
export default {
name: "datatable",
mounted() {
axios.get('http://localhost:8080/api/fields?model_id=1').then(response => this.headers = response.data.results)
axios.get('http://localhost:8080/api/freemodelitems?model_id=1').then(response => {
this.totalPages = response.data.count > 10 ? Math.ceil(response.data.count / 10) : 1
this.page = this.options.page
for (let i = 0; i < response.data.results.length; i++) {
this.all_items.push(response.data.results[i].data)
}
})
},
watch: {
search: function (val) {
this.search = val
this.onOptionsChanged(this.options, true)
return val
}
},
methods: {
onOptionsChanged(options, page0=false) {
console.log(page0)
axios.get('http://localhost:8080/api/freemodelitems?model_id=1' +
'&page=' +
(!page0 ? this.options.page : 1) +
'&search=' +
this.search).then(response => {
this.page = !page0 ? this.options.page : 1
this.totalPages = response.data.count > 10 ? Math.ceil(response.data.count / 10) : 1
console.log(this.totalPages)
console.log(this.page)
this.all_items = [];
for (let i = 0; i < response.data.results.length; i++) {
this.all_items.push(response.data.results[i].data)
}
})
},
},
data() {
return {
search: "",
options: {},
headers: [],
all_items: [],
pageSize: 10,
totalPages: 0,
page: 1,
}
},
}
</script>
