Блог

Добрый день, ребята,

У меня есть неупорядоченный список, к которому я хотел бы применить разбивку на страницы с помощью flexboxes. Любая помощь приветствуется:

 > <template>
  <div id="app">

  <ul>

    <li v-for="item in items.results" :key="item.id">
        {{ item.pub_date }} {{item.image.file}} {{item.title}}
         <div class="downloads">
          <span
            v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
            :key="downloadable.id"
           >{{ downloadable.document_en.file }}</span>
           </div>
    </li>
    </ul>

  
  </div>

</template>



<style>

</style>
 

Шаг 1: Создание Pagination.vue компонента

 <template>
  <ul class="pagination">
    <li class="pagination-item">
      <button type="button" @click="onClickFirstPage" :disabled="isInFirstPage">First</button>
    </li>
    <li class="pagination-item">
      <button type="button" @click="onClickPreviousPage" :disabled="isInFirstPage">Previous</button>
    </li>
    <li :key="page.id" v-for="page in pages" class="pagination-item">
      <button type="button" @click="onClickPage(page.name)" :disabled="page.isDisabled"
        :class="{ active: isPageActive(page.name) }">{{ page.name }}</button>
    </li>
    <li class="pagination-item">
      <button type="button" @click="onClickNextPage" :disabled="isInLastPage">Next</button>
    </li>
    <li class="pagination-item">
      <button type="button" @click="onClickLastPage" :disabled="isInLastPage">Last</button>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    maxVisibleButtons: {
      type: Number,
      required: false,
      default: 3
    },
    totalPages: {
      type: Number,
      required: true
    },
    perPage: {
      type: Number,
      required: true
    },
    currentPage: {
      type: Number,
      required: true
    }
  },
  computed: {
    isInFirstPage () {
      return this.currentPage === 1
    },
    isInLastPage () {
      if (this.totalPages === 0) {
        return true
      }
      return this.currentPage === this.totalPages
    },
    startPage () {
      // When on the first page
      if (this.currentPage === 1) {
        return 1
      }
      // When on the last page
      if (this.totalPages < this.maxVisibleButtons) {
        return 1
      }
      if (this.currentPage === this.totalPages) {
        return this.totalPages - this.maxVisibleButtons   1
      }
      // When in between
      return this.currentPage - 1
    },
    endPage () {
      if (this.totalPages === 0) {
        return 1
      }
      if (this.totalPages < this.maxVisibleButtons) {
        return this.totalPages
      }
      return Math.min(this.startPage   this.maxVisibleButtons - 1, this.totalPages)
    },
    pages () {
      const range = []
      for (let i = this.startPage; i <= this.endPage; i = 1 ) {
        range.push({
          name: i,
          isDisabled: i === this.currentPage 
        })
      }
      return range
    }
  },
  methods: {
    onClickFirstPage () {
      this.$emit('pagechanged', 1)
    },
    onClickPreviousPage () {
      this.$emit('pagechanged', this.currentPage - 1)
    },
    onClickPage (page) {
      this.$emit('pagechanged', page)
    },
    onClickNextPage () {
      this.$emit('pagechanged', this.currentPage   1)
    },
    onClickLastPage () {
      this.$emit('pagechanged', this.totalPages)
    },
    isPageActive (page) {
      return this.currentPage === page
    }
  }
}
</script>

<style scoped>
  .pagination {
    list-style-type: none;
    float: right;
    margin: 10px 0;
  }
  .pagination-item {
    display: inline-block;
  }
  .active {
    background-color: #943849;
    color: #ffffff !important;
    font-weight: bold;
  }
  button[disabled], html input[disabled] {
    cursor: defau<
    color: lightgray;
  }
</style>
 

Шаг 2: Добавьте Pagination ссылку на компонент в app.vue компонент

 import Pagination from './components/Pagination'
 

Добавить Pagination компонент в app.vue

 export default {
  components: {
   Pagination,
},
 

Шаг 3: Создайте данные модели с помощью объекта разбивки на страницы

 data() {
  return {
    items:[],
    page: 1,
    totalPages: 0,
    totalRecords: 0,
    recordsPerPage: 10
  }
},
 

Шаг 4: Создайте methods для загрузки data и добавления pagination

 methods: {
  loadPressRelease () {
    this.showLoader = true
    axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page=${this.page}amp;page_size=${this.recordsPerPage}amp;type=5`)
    .then(response => {
      this.showLoader = false
      this.items = response.data
      this.totalPages = Math.ceil(response.data.count / this.recordsPerPage)
      this.totalRecords = response.data.count
    })
  },
  onPageChange(page) {
    this.page = page
    this.loadPressRelease()
  }
}
 

Шаг 5: загрузка страницы по умолчанию created для методов

 created() {
  this.loadPressRelease()
},
 

Шаг 6: HTML шаблон со pagination ссылкой

 <div id="app">
    <ul>
      <li v-for="item in items.results" :key="item.id">
        {{ item.pub_date }} {{item.image amp;amp; item.image.file}} {{item.title}}
        <div class="downloads">
          <span v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
            :key="downloadable.id">{{ downloadable.document_en.file }}
          </span>
        </div>
      </li>
    </ul>
    <Pagination v-if="items.results" :total-pages="totalPages" :per-page="this.recordsPerPage" :current-page="page" @pagechanged="onPageChange" />
 </div>
 

ДЕМОНСТРАЦИЯ с загрузчиком

Это в значительной степени состояние вперед.

Создайте несколько констант:

 const ROW_PER_PAGE = 10;
const CURRENT_PAGE = 0;
 

добавьте их в свой метод данных:

 return {
 rowPerPage: ROW_PER_PAGE,
 currentPage: CURRENT_PAGE,
 items: allMyData
}
 

используйте computed свойство, чтобы возвращать только необходимое количество строк:

 computed: {
 getPaginatedData() {
    const start = this.currentPage * this.rowPerPage;
    const end = start   this.rowPerPage;
    return this.items.slice(start, end); // end index won't be included
 }
}
 

Теперь просто используйте это getPaginatedData в своем шаблоне

  <li v-for="item in getPaginatedData" :key="item.id">
 

Последняя часть — это кнопки для изменения страницы. И при каждом изменении страницы просто обновляйте currentPage переменную.

Для добавления кнопок разбивки на страницы, конечно, вы можете создать свой собственный компонент, но если у вас меньше времени, вы можете использовать индивидуально разработанный компонент. Тот, который мне нравится https://getbootstrap.com/docs/4.0/components/pagination /