Keeping the table as basic as possible to figure this out. I am struggling to learn how to create server side sorting/pagination to function in vuetify. When I add the :options or :server-items-length bind the table no longer sorts or paginates.

Without either of those, I get a default listing of 10 items per row - and the sorting all works perfectly fine as well the pagination. However, parameters in the api require a page item count thus forcing a hardcoded number or using the :options bind. If i just place a hard coded number things work fine, but when I bind I get proper items per page but no sorting and pagination.

Very simple data table:

             <v-data-table
           :items="ItemResults.items" 
           :headers="TableData.TableHeaders" 
           :loading="TableData.isLoading" 
       >
         </v-data-table>    

    

//Base data returns, with headers and options as well the array that items are stored in.

    

   data() {
         return {
             ItemResults:[],
             TableData: {
                 isLoading: true,
                 TableHeaders: [
          
                     { value: "title", text: "Title" },
                     { value: 'artist', text: 'Artist' },
                     { value: 'upc', text: 'UPC' },
                     { value: "retailPrice", text: "Price/Quantity"},
                 ],
             },
             options: 
             {
                page: 1, 
                itemsPerPage: 15
            },
         }
     },    

    

//Then last, my async method to grab the data from the api, and place it in the itemresults array.

             
    async getProducts(){
             this.TableData.isLoading = true;
             const { page, itemsPerPage } = this.options;
             var temp = await this.$axios.get(`Inventory/InventoryListing_inStock/1/${page}/${itemsPerPage}`);
             this.ItemResults = temp.data;
             this.TableData.isLoading = false;
             return this.ItemResults;
         },     

I have tried following Vuetify Pagination and sort serverside guide, but I'm not sure where they are recommending to make the axios call.

The lead backend dev is working on setting a sorting function up in the api for me to call paramaters to as well - Im not sure how that will function along side.

but I dont know how to have this controlled by vuetify eithier, or the best practice here.

EDIT: I've synced the following:

           :options.sync="options"
           :sort-by.sync="sortBy"
           :sort-desc.sync="sortDesc"

but i think I dont need to sync the last two. My options:

             options: 
             {
                page: 1, 
                itemsPerPage: 15,
                sortBy: ['title'],
                sortDesc: [false]
            },

and in my data I put the array for sort by and sort desc

            sortBy: [
                'title', 'artist', 'upc', 'retailPrice'
            ],
            sortDesc:[true, false],

pagination is now working, and sort ascending is now working, but when I click to descend the header I get an error that the last two params are empty on update to / / instead of /sortBy/sortDesc result. So its not listing the values on changes.

CodePudding user response：

1. When your component mounts, you need to fetch the total number of items available on the server and the first page of data, and set these as :items and :server-items-length. The latter will (as you observed) disable paging and sorting, as your server will take care of it, and it is used to calculate the total number of pages given a selected page size.
2. Now you need to know when to reload data. For this, you either bind options to the v-data-table with two-way binding (.sync) and set a watcher on it, or you listen to the update:options event. And whenever options change, you fetch the selected data from the server.

That's basically all it takes.

In your template:

       <v-data-table
           :items="items" 
           :headers="headers" 
           :loading="true"
           :server-items-length="numberOfItemsOnServer"
           @update:options="options => loadPage(options)"
       />

In your component:

methods: {
  async loadPage(options){
    this.items = [] // if you want to show DataTable's loading-text
    this.items = await fetch('yourUrl'   new URLSearchParams({
      // build url params from the options object
      offset: (options.page - 1) * options.itemsPerPage,
      limit: options.itemsPerPage,
      orderBy: options.sortBy.map((sb,ix) => [sb, options.sortDesc[ix] ? 'desc' : 'asc'])
    }))
  }
}