Media24si / Vue Pagination
Licence: mit
Pagination for vuejs with combination with bootstrap and Laravel's pagination
Stars: ✭ 102
Labels
Projects that are alternatives of or similar to Vue Pagination
Bpage
Based on bootstrap style, static page jump can also be asynchronous page processing pagination plugin
Stars: ✭ 96 (-5.88%)
Mutual labels: pagination, bootstrap
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+10750.98%)
Mutual labels: pagination, bootstrap
Seven
Eleventy template using Bootstrap, Sass, Webpack, Vue.js powered search, includes lots of other features
Stars: ✭ 114 (+11.76%)
Mutual labels: pagination, bootstrap
Laravel Vue Pagination
A Vue.js pagination component for Laravel paginators that works with Bootstrap
Stars: ✭ 541 (+430.39%)
Mutual labels: pagination, bootstrap
Hibiscus.js
Native Angular directives for Bootstrap4
Stars: ✭ 115 (+12.75%)
Mutual labels: pagination, bootstrap
Ng Bootstrap
Angular powered Bootstrap
Stars: ✭ 7,872 (+7617.65%)
Mutual labels: pagination, bootstrap
Angular Multi Step Wizard
Tutorials on building an Angular 4 Multi-Step Wizard with its own Router
Stars: ✭ 96 (-5.88%)
Mutual labels: bootstrap
Educenter Hugo
Educenter is an educational website template. It can be used as an online teaching platform, school and university websites
Stars: ✭ 96 (-5.88%)
Mutual labels: bootstrap
Bootstrap List Filter
Search widget to filter Bootstrap lists
Stars: ✭ 95 (-6.86%)
Mutual labels: bootstrap
Frontie Webpack
Front-end Boilerplate | Gulp 4 + Webpack 4 + Babel + ITCSS Architecture + BEM Methodology + Twig.js
Stars: ✭ 102 (+0%)
Mutual labels: bootstrap
Bootstrap Select
🚀 The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
Stars: ✭ 9,442 (+9156.86%)
Mutual labels: bootstrap
Ecommerce Laravel Bootstrap
Responsive, Multi-Vendor, MultiLanguage Online Store Platform (shopping cart solution)
Stars: ✭ 99 (-2.94%)
Mutual labels: bootstrap
Bootstrap 4 Github Pages
A Bootstrap 4 template project for Github Pages and Jekyll
Stars: ✭ 96 (-5.88%)
Mutual labels: bootstrap
Next Express Bootstrap Boilerplate
⚡️ JavaScript boilerplate for a full stack app built using React.js, Next.js, Express.js, react-bootstrap, SCSS and full SSR with eslint.
Stars: ✭ 102 (+0%)
Mutual labels: bootstrap
Bootstrap Popover Picker
Generic Bootstrap plugin template for building selector components with popovers.
Stars: ✭ 95 (-6.86%)
Mutual labels: bootstrap
Booklibrary
📚Simple Book library application written on flask with SQLite database.
Stars: ✭ 98 (-3.92%)
Mutual labels: bootstrap
Coreui Angularjs
CoreUI AngularJS is free AngularJS admin template based on Bootstrap 4
Stars: ✭ 101 (-0.98%)
Mutual labels: bootstrap
Clever Bootstrap 4 Admin Template With Angularjs Angular 2 Support
Clever is Boostrap 4 Admin Template with Angular 2 and AngularJS support
Stars: ✭ 98 (-3.92%)
Mutual labels: bootstrap
vue-pagination
Vue pagination component for use with Bootstrap and Laravel pagination.
- Vue.js (tested with 2.2.1).
- Bootstrap CSS (tested with 3.3.7)
To use with Vue.js 1 use the 1x version.
Laravel is not required as long as the pagination object contains the required attributes
- current_page,
- last_page,
- per_page,
Installation
npm install --save vue-bootstrap-pagination
or
yarn add vue-bootstrap-pagination
Example
import pagination from 'vue-bootstrap-pagination'
new Vue({
el: '#app',
data() {
return {
items: [],
pagination: {
total: 0,
per_page: 12, // required
current_page: 1, // required
last_page: 0, // required
from: 1,
to: 12
},
paginationOptions: {
offset: 4,
previousText: 'Prev',
nextText: 'Next',
alwaysShowPrevNext: true
}
}
},
methods: {
loadData() {
const options = {
params: {
paginate: this.pagination.per_page,
page: this.pagination.current_page,
/* additional parameters */
}
};
this.$http.get('/getData', options)
.then(response => {
this.items = response.data.data;
// Overwrite pagination object
this.pagination = response.data.pagination; // API response edited to have pagination data under pagination object
// Or overwrite only values
/*
this.pagination.current_page = response.data.current_page;
this.pagination.last_page = response.data.last_page;
...
*/
})
.catch(error => {
// handle error
});
}
},
components: {
pagination
}
})
<body id="app">
<ul class="list-group">
<li class="list-group-item" v-for="item in items">{{ item.name }}</li>
</ul>
<pagination :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination>
</body>
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| pagination | Object | true | Pagination object used to create pagination | |
| callback | Function | true | Callback function used to load data for selected page | |
| options | Object | Configuration. Look below for available options | ||
| size | String | Change the default size of the pagination. Options: large, small. |
Offset prop has ben removed with version 2.10.0. Use options.offset instead
Options
| Name | String | Default | Description |
|---|---|---|---|
| offset | Number | 3 | Left and right offset of pagination numbers to display |
| ariaPrevious | String | Previous | Change default aria previous text |
| ariaNext | String | Next | Change default aria next text |
| previousText | String | « | Change default previous button text |
| nextText | String | » | Change default next button text |
| alwaysShowPrevNext | Boolean | false | Show prev/next button even if on first/last page |
If you change this.pagination.per_page the callback function will be called
Contributing
Please see CONTRIBUTING for details.
License
The MIT License (MIT). Please see License File for more information.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].