Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/brunoseco/vue-pagination-bootstrap

Server-side paging component in vue, template based on bootstrap
https://github.com/brunoseco/vue-pagination-bootstrap

Last synced: about 2 months ago
JSON representation

Server-side paging component in vue, template based on bootstrap

Lists

README 

        
# vue-pagination-bootstrap

Server-side paging component in vue, template based on bootstrap



* [Vue.js](http://vuejs.org/) (tested with 2.x)

* [Bootstrap CSS](http://getbootstrap.com/) (tested with 4.x)



### Installation



```bash

$ npm install vue-pagination-bootstrap

```



### Example

```js

import pagination from 'vue-pagination-bootstrap'

    

new Vue({

  el: '#app',,

  components: { pagination }

  data () {

    return {

      total: 1000,

      pageSize: 50,

      paginationOptions: { // Not required to pass this configurations

		    offset: 2,

        previousText: 'Prev',

        nextText: 'Next',

        alwaysShowPrevNext: true

      }

    }

  },

  methods: {

    pageChanged (page) {            

      console.log(page)

      // Exec your response to server passing 'page' params as clicked button paging

    }

  }

})

```



```html



  

  



```



#### Props

| Name          | Type     | Default | Required | Description

| :------------ | :--------| :-------| :--------| :-----------

| total         | Number   |         | true     | Total itens in server side

| pageSize      | Number   |         | true     | Number of itens in page

| callback      | Function |         | true     | Callback function used to load data for selected page

| nav-class     | String   |         | false    | Class will be include in nav element

| ul-class      | String   |         | false    | Class will be include in ul element

| li-class      | String   |         | false    | Class will be include in all li element



##### 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