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>

CodePudding user response：

The problem is :server-items-length="totalPages". You are setting the property with total amount of pages, but you need to set it with total amount of items or remove it all together because the component can calculate the number of pages itself.

Quoted from documentation of prop server-items-length:

Used only when data is provided by a server. Should be set to the total amount of items available on server so that pagination works correctly