Как я могу сделать показ с 1 по 3 из 12 записей в Vue.js?

Question

Я хочу добавить «Показано от 1 до 3 из 12 записей» в нижней части моей таблицы.Я хочу изменить «Отображение с 1 по 3 ...», когда пользователь нажимает следующую или предыдущую кнопку или номер 1234 нумерации страниц.Это зависит от количества первых строк и последней строки в таблице.Например, когда пользователь нажимает кнопку «Далее» или «2», это будет выглядеть так: «Показано от 4 до 6 из 12 записей».Я хочу показать только «предыдущий 123 следующий» вместо «предыдущий 1234 следующий» для моей нумерации страниц.Это мой jsfiddle https://jsfiddle.net/wbshyrn2/4/

Showing {{customers.length - 11}} to {{customers.length - 9}} of {{customers.length}} entries

Answer 1

Вычисленное свойство может использоваться для вычисления начального и конечного индексов.

    maxBtns: function(){
      return Math.ceil(this.customers.length / 3) > 3 ? 3 : Math.ceil(this.customers.length / 3);
    },
    positionText: function () {
      var endIndex = this.currentPage * this.perPage,
        startIndex = ((this.currentPage - 1) * this.perPage) + 1;

      return "Showing "+startIndex+ " to "+ (endIndex>this.customers.length? this.customers.length :endIndex)  + " of " + this.customers.length;
    }

Для отображения максимум 3 кнопок вы можете использовать вычисленное свойство в кнопке v-for привязка.

<button class="btn btn-primary btn-sm btn-group toggle float-right" data-toggle="buttons" v-for="num in maxBtns" @click="pagination(num)">{{num}}</button>