vuejs-pagination-semantic-ui

    1.0.0 • Public • Published

    Vue Pagination for Semantic-UI ⚡️

    • This is on GitHub so let me know if I've messed it somewhere, give me a star ⭐️ if you like it, 🍻
    • Server-side paging component in vue, template based on Semantic-UI.

    ✅ Installation 👌

    $ npm install vuejs-pagination-semantic-ui

    ✅ Usage 🎓

    import pagination from 'vuejs-pagination-semantic-ui'
        
    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
        }
      }
    })

    ✅ Example 🍀

    <body id="app">
      <pagination :total="total" :page-size="pageSize" :callback="pageChanged" :options="paginationOptions">
      </pagination>
    </body>

    ✅ 📖 Props:

    Name Type Default Required Description
    total Number true Total items in server side
    pageSize Number true Number of items in page
    callback Function true Callback function used to load data for selected page

    ✅ 📖 Options:

    Name String Default Description
    offset Number 3 Left and right offset of pagination numbers to display
    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

    NPM :octocat:

    NPM

    License 📖

    • MIT

    Install

    npm i vuejs-pagination-semantic-ui

    DownloadsWeekly Downloads

    11

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • vinayakkulkarni