Skip to content
Snippets Groups Projects
Pagination.vue 2.64 KiB
Newer Older
  • Learn to ignore specific revisions
  • <template>
    
      <div v-if='maxPage > 1' class="ui pagination menu" role="navigation" :aria-label="labels.pagination">
    
          :disabled="current - 1 < 1"
    
          @click.prevent.stop="selectPage(current - 1)"
          :class="[{'disabled': current - 1 < 1}, 'item']"><i class="angle left icon"></i></a>
    
        <template v-if="!compact">
    
            v-if="page !== 'skip'"
            v-for="page in pages"
    
            :class="[{'active': page === current}, 'item']">
            {{ page }}
    
          <div v-else class="disabled item">
    
          :disabled="current + 1 > maxPage"
    
          @click.prevent.stop="selectPage(current + 1)"
          :class="[{'disabled': current + 1 > maxPage}, 'item']"><i class="angle right icon"></i></a>
    
      </div>
    </template>
    
    <script>
    
    import _ from "@/lodash"
    
    
    export default {
      props: {
    
        current: { type: Number, default: 1 },
        paginateBy: { type: Number, default: 25 },
        total: { type: Number },
        compact: { type: Boolean, default: false }
    
      },
      computed: {
    
        labels() {
          return {
            pagination: this.$gettext("Pagination")
          }
        },
        pages: function() {
    
          let range = 2
          let current = this.current
          let beginning = _.range(1, Math.min(this.maxPage, 1 + range))
    
          let middle = _.range(
            Math.max(1, current - range + 1),
            Math.min(this.maxPage, current + range)
          )
    
          let end = _.range(this.maxPage, Math.max(1, this.maxPage - range))
          let allowed = beginning.concat(middle, end)
          allowed = _.uniq(allowed)
    
          allowed = _.sortBy(allowed, [
            e => {
              return e
            }
          ])
    
          let final = []
          allowed.forEach(p => {
            let last = final.slice(-1)[0]
            let consecutive = true
    
              consecutive = false
            } else {
              if (!last) {
                consecutive = true
              } else {
                consecutive = last + 1 === p
              }
            }
            if (consecutive) {
              final.push(p)
            } else {
    
              if (p !== "skip") {
                final.push("skip")
    
                final.push(p)
              }
            }
          })
          return final
    
          return Math.ceil(this.total / this.paginateBy)
        }
      },
      methods: {
    
          if (page > this.maxPage || page < 1) {
            return
          }
    
          if (this.current !== page) {
    
    troll's avatar
    troll committed
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    .ui.pagination.menu .item {
    
    troll's avatar
    troll committed
    }
    </style>