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.
Top comments (0)