Pagination and search in vue bootstrap table

Vijayakumar — Mon, 27 Sep 2021 07:30:00 +0000

Vue is really useful when you want to bring up an application up very soon with very minimal learning curve.

But, when you want to fine tune the application is when you would have to make sure that you are know the finer details (though this can be said for any language/framework)

Lets assume that you have a basic Vue bootstrap table in place with the below tag

<b-table
....
  :items="employees"
  :fields="fields"
</b-table>

With the data being provided to the above table as shown below

data() {
    return {
      fields: [
        { key: 'id', sortable: true },
        { key: 'name', sortable: true, },
        { key: 'delete', label: 'Delete' },
      ],
      employees: [
        {
          id: 101,
          name: 'Sam',
        },
        {
          id: 102,
          name: 'Jane',
        },
      ],
    }
  },

Pagination in the above table can be added using the b-pagination tag. Lets go ahead and add the basic pagination to the above table

<b-pagination
  v-model="currentPage"
  :total-rows="rows"
  :per-page="perPage"
  aria-controls="my-table"
></b-pagination>

The currentPage will contain the current page the table is in, the rows variable will show the total rows in the table and the perPage will allow the number of items to be shown per page.

A simple text box is enough to bring search which can be done using b-form-input tag

<b-form-input
  v-model="filter"
  type="search"
  placeholder="Type to filter data"
></b-form-input>

In the above tag, the filter variable will be responsible to filter data in the table.

So, lets link the above pagination and search to the table

<b-table
  ...
  :filter="filter"
  :per-page="perPage"
  :current-page="currentPage"
  ...
>

....
....

data() {
    return {
      perPage: 10,
      currentPage: 1,
      rows: 1,
      filter: null,
      ...
    }
  },

The above code will bring basic pagination and search to our table. But to make it fully complete, we will need to update the rows count for the table.

Lets do that when the component is getting mounted for the initial state.

mounted() {
    this.rows = this.employees.length
  },

Now, to update the row count dynamically, lets make use of filtered event which also provides with filteredItems arguments which is basically an array of items after filtering (before local pagination occurs)

<b-table
    ...
    @filtered="onFiltered"
    ...
>
...
...
methods: {
    onFiltered(filteredItems) {
      this.rows = filteredItems.length
      this.currentPage = 1
    },
}

The onFiltered method updates the current number of rows after filtering and the current page in pagination. These 2 fields are required to be updated dynamically. Failing to do so will show a blank page when filtering from pages other than the first one.

DEV Community: Vijayakumar

Pagination and search in vue bootstrap table