[Vuejs]-Button pagination with dots

by

0👍

✅

it’s not that straight forward to do it in a one-liner, the approach I would recommend is to use a computed

you could use the function from https://stackoverflow.com/a/67658442/197546

// define method
function paginate(current_page, last_page, onSides = 3) {
  // pages
  let pages = [];
  // Loop through
  for (let i = 1; i <= last_page; i++) {
    // Define offset
    let offset = (i == 1 || last_page) ? onSides + 1 : onSides;
    // If added
    if (i == 1 || (current_page - offset <= i && current_page + offset >= i) ||
        i == current_page || i == last_page) {
        pages.push(i);
    } else if (i == current_page - (offset + 1) || i == current_page + (offset + 1)) {
        pages.push('...');
    }
  }
  return pages;
}

// then in component...
data:{
  return{
    pages:[...],
    currentPage: 0,
  }
},
//...
computed: {
  pageNums = () {
    return paginate(this.currentPage, this.pages.length, 4)
  }
}

then, because the ... should not have an event listener, you can use <template> and v-if to use different element

<div class="button_container">
  <template v-for="(pageNum, i) in pages" :key="i">
    <button v-if="Number.isInteger(pageNum)" @click="currentPage = i">
      {{ pageNum }}
    </button>
    <span v-else>
      {{ pageNum }}
    </span>
  </template >
</div>

Leave a comment