vue data-table 服务器端搜索下一个按钮在结果少于 10 页时禁用

Question

我使用 Vue data-table (v-data-table) 实现了服务器端搜索和分页。当我开始在搜索栏中输入内容时，起初只有一个 'n' 它 returns 55 页，这是正确的，我可以使用 next/previous 按钮浏览页面。但是当搜索是 'ni' 并且只有 returns 25 个项目时（它计算正确这应该是 3 页）我的下一个按钮被禁用......见下文。有没有人知道哪里出了问题。我还附上了以 data-table 模板开头的代码...

          <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>

Answer 1

问题是:server-items-length="totalPages"。您正在设置属性总页数，但您需要将其设置为总项目数或将其全部删除，因为该组件可以自行计算页数。

引自 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

vue data-table 服务器端搜索下一个按钮在结果少于 10 页时禁用

vue data-table server side search next button disabled when less than 10 pages in result

search

server-side

vue.js

v-data-table