QPagination 📖
The QPagination is a component that is used to navigate between pages.
Example
Default view:
Using in template:
<q-pagination
:total="200"
:page-size="10"
:current-page="currentPage"
@current-change="handlePageChange"
/>
1
2
3
4
5
6
2
3
4
5
6
Using in component instance:
export default defineComponent({
setup() {
const currentPage = Vue.ref(1);
const handlePageChange = (value) => {
currentPage.value = value;
};
return { currentPage, handlePageChange };
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Props
pageCount
- Type:
Number - Default:
null
Setting total page count manually. If you haven't passed a pageCount it will be calculated as a total / pageSize.
<q-pagination
:total="200"
:page-count="15"
:current-page="currentPage"
@current-change="handlePageChange"
/>
1
2
3
4
5
6
2
3
4
5
6
pageSize
- Type:
Number - Default:
null
Items count on the page.
<q-pagination
:total="200"
:page-size="10"
:current-page="currentPage"
@current-change="handlePageChange"
/>
1
2
3
4
5
6
2
3
4
5
6
total
- Type:
Number - Default:
null
Total items count on the all pages.
<q-pagination
:total="200"
:page-size="10"
:current-page="currentPage"
@current-change="handlePageChange"
/>
1
2
3
4
5
6
2
3
4
5
6
currentPage
- Type:
Number - Default:
null
Current active page number.
<q-pagination
:total="200"
:page-size="10"
:current-page="5"
@current-change="handlePageChange"
/>
1
2
3
4
5
6
2
3
4
5
6
pagerCount
- Type:
Number - Default:
7
Visible page's buttons count. It MUST be >= 3.
<q-pagination
:total="200"
:page-size="10"
:current-page="currentPage"
:pager-count="5"
@current-change="handlePageChange"
/>
1
2
3
4
5
6
7
2
3
4
5
6
7
disabled
- Type:
Boolean - Default:
false
Whether QPagination is disabled.
<q-pagination
disabled
:total="200"
:page-size="10"
:current-page="currentPage"
@current-change="handlePageChange"
/>
1
2
3
4
5
6
7
2
3
4
5
6
7
Events
current-change
Triggers when the current page changes
prev-click
Triggers when the prev button is clicked
next-click
Triggers when the next button is clicked
quick-prev-click
Triggers when the quick prev button (...) is clicked
quick-next-click
Triggers when the quick next button (...) is clicked