Pagination not working in filtered items Vuetify data table

Question

I am having a vuetify data table, where I am binding the table with (custom) filtered items.

   <template>
    <v-data-table
            :headers="headers"        
            :items="filteredItems"                
            :search="search"
            no-data-text="No data available."     
            hide-actions        
            class="elevation-1"     
            :total-items="pagination.totalItems"        
            :rows-per-page-items="[20, 20]"
          >
    ...
  <template slot="pageText" slot-scope="{ pageStart, pageStop }">
        From {{ pageStart }} to {{ pageStop }}
      </template>
    </template>
</v-data-table> 
      <div class="text-xs-center pt-2">
        <v-pagination v-model="pagination.page" :length="pages"></v-pagination>
      </div>

    <script>
    ...
    export default {
      data() {
        return {
          menu: "",
          pagination: {
            page: 1,
            rowsPerPage: 10,
            totalItems: 0
          },
        ...
          formatted: "",
          search: "",
          items: [],
          type: "",
          ...

        };
      },


      computed: {

        computedPagination() {
          return this.pagination;
        },
        filteredItems() {
          return this.items.filter(i => {
            return (
              (!this.type || i.Type === this.type) &&
              (this.filteredAge === "" ||
                this.filteredAge === 0 ||
                i.Age < this.filteredAge) &&
                this.alumni === "" || i.alumni === this.alumni);
          });
        },
    ...
    </script>

(I fetch data and fill the "items" array thru' a separate method, which is omitted in the code shown above)

Even though pagination is defined, it is working as expected (it just shows the icons below the data table without any action).

Is it because of the filteredItems or any other config missing?

Thanks

Max Sherbakov Max Sherbakov · Accepted Answer · 2019-02-26T14:26:15

It's because you have pagination.totalItems : 0. You need to init pagination.totalItems when component mounted() as filteredItems.lenght or items.lenght

mounted(){
   this.pagination.totalItems = items.length;
},

Pagination not working in filtered items Vuetify data table

1 Answers