About vuetify v-data table pagination

Question

enter image description here

Is it possible to modify v-data-table pagination?

In this v-data-table pagination section(next,previous button).Am trying to give functions to this next and previous pagination button. But i don't know how to modify this pagination section in v-data-table!

Actually am trying to modify v-data-table to connect pagination with back end response. But i don't get it.

  <v-data-table :headers="headers" :items="userDetails" :search="search" :items-per-page="perPage"
    :pagination.sync="pagination"   :server-items-length="totalUsers" class="elevation-1"
    >

    <template v-slot:[`item.type`]="{ item }">
      <div v-if="item.type == 1">
        <v-icon>mdi-account-circle</v-icon>
        Google User
      </div>
      <div v-if="item.type == 0">
        <v-icon>mdi-account-box</v-icon>
        Normal User

      </div>
    </template>
    <template v-slot:[`item.status`]="{ item }">
      <div v-if="item.status == 1">
        <v-icon style="color:green">mdi-checkbox-blank-circle </v-icon>
        Active
      </div>
      <div v-if="item.status == 0">
        <v-icon style="color:red">mdi-checkbox-blank-circle </v-icon>

        Inactive
      </div>
    </template>
    <template v-slot:[`item.action`]="{ item }">
      <div v-if="item.status == 1">
        <v-btn style="    width: 118px;" color="red" class="white--text" v-on:click="Active(item.id)">

          De-Activate
        </v-btn>

      </div>
      <div v-if="item.status == 0">

        <v-btn style="    width: 118px;" color="green" class="white--text" v-on:click="deActive(item.id)">
          Activate</v-btn>

      </div>

    </template>
  </v-data-table>

Script method below

async getUser() {

  http.get("/loggedInUser?page=").then((response) => {
    console.log(response)
    console.log("ee", response.data)
    this.userDetails = response.data.users.data
    this.totalUsers = response.data.users.total
    this.perPage = response.data.users.per_page
    console.log("qq", this.totalUsers)
    
    this.userDetailss = this.userDetails.map((item) => item.status);
    console.log("1122222", this.userDetailss);
    // this.userStatus=response.data.users.data.status
    // console.log("dd",this.userStatus)
    console.log("ww", this.userDetails);

  });
},

I want to add perPage to an API endpoint ("/loggedInUser?page=") when the pagination button is clicked.

Can you please explain your question a bit more by adding code info, images, use case, etc.? — Neha Soni, Mar 02 '23 at 04:42
I'm not sure about what you are trying to do. Do you just need to call a function when the user changes the page? If so, just use the [`@pagination` event](https://v2.vuetifyjs.com/en/api/v-data-table/#events-pagination). — Kapcash, Mar 02 '23 at 07:54

Moritz Ringler · Answer 1 · 2023-03-02T10:16:14.973

Yes, you can bind a function to changes to pagination with the update:page event:

<v-data-table
  ...
  @update:page="page => onUpdatePageHandler(page)"
>

It sounds like you want to realize external pagination, in which case you might be better off listening to update:options:

<v-data-table
  ...
  @update:options="loadUsersWithOptions"
>

and

async loadUsersWithOptions({page, itemsPerPage, sortBy, sortDesc}) {
  const url = "/loggedInUser"
  const params = {page, itemsPerPage, sortBy, sortDesc}
  const response = await http.get(url, params) // don't know if you can pass params to your http directely, maybe you need to build the url manually
  const users = response.data.users
  ...
},

Alternatively, instead of using the events directly, you can .sync to data properties and watch changes to those. This is described in the documentation as external pagination. While it is just an extra step to do the same as above, it allows you to manage the individual states more cleanly.

About vuetify v-data table pagination

1 Answers1