javascript - 了解如何在 Bootstrap-vue 中使用分页

Question

我编写了以下代码:

<div>
    <div id="app" class="container">
        <div class="grid">
            <article v-for="tool in tools">
                <div class="title">
                    <h3>{{capitalizeFirstLetter(tool.name)}}</h3>
                </div>
                <div class="description">
                    {{tool.description}}
                </div>
                <br>
                <div>
                    <toggle-button :value=tool.status color="#82C7EB" :width=100 :height=30 :sync="true" :labels="{checked: 'Following', unchecked: 'Unfollowing'}" @change="onChange(tool)"/>
                </div>
            </article>
        </div>
    </div>
</div>

最近我开始使用 Bootstrap-Vue。我试图弄清楚如何添加 pagination在底部。我不确定 aria-controls 是如何工作的。我的目标是每个页面上有 9 个工具 block 。我应该如何添加分页以便移动到接下来的 9 个工具 block ？

Answer 1

由于不清楚您是否需要客户端分页或服务器端，我在代码片段中制作了两者的示例。

为了简单起见，我将其设置为每页 3 个，但您可以将其更改为 9 个。

第一个在加载时获取初始页面，然后在每次页面更改时使用观察程序调用 API，该观察程序使用新页面调用一个方法，然后检索该位置并替换我们的旧数据与新数据。

第二个在页面加载时加载所有数据，并根据 per_page 属性对数据数组进行切片，以便仅显示该页面的项目。为此，我使用了一个计算属性，它会根据其中使用的属性自动更新。

两个分页都使用页面元素容器的 id 定义了 aria-controls。这用于告诉屏幕阅读器分页更改了哪些元素。

类row、col-*、border、mx-auto、h2 和 text-center 是用于样式和布局的类，不是实际解决方案的一部分，因此您可以自由更改或删除它们。

new Vue({
  el: '#app',
  computed: {
    pagination2CurrentItems() {
      const startIndex = (this.pagination2.current_page - 1) * this.pagination2.per_page;
      const endIndex = startIndex + this.pagination2.per_page;
      return this.pagination2.items.slice(startIndex, endIndex)
    }
  },
  created() {
    this.getPagination1Data()
    this.getPagination2Data()
  },
  filters: {
    capitalizeFirstLetter(value) {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  data() {
    return {
      pagination1: {
        items: [],
        per_page: 3,
        total_rows: 0,
        current_page: 1
      },
      pagination2: {
        items: [],
        per_page: 3,
        total_rows: 0,
        current_page: 1
      }
    }
  },
  methods: {
    getPagination1Data(page = 1) {
      fetch(`https://reqres.in/api/unknown?page=${page}&per_page=3`)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          this.pagination1.total_rows = data.total;
          this.pagination1.items = data.data;
        });
    },
    getPagination2Data() {
      /*  
        This endpoint only has 12 items total, 
        so this will get all in one call
      */
      fetch(`https://reqres.in/api/unknown?per_page=12`)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          this.pagination2.total_rows = data.total;
          this.pagination2.items = data.data;
        });
    }
  },
  watch: {
    'pagination1.current_page'(newPage) {
      this.getPagination1Data(newPage)
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<div id="app" class="container">
  <div id="tools_list_1" class="row">
    <div class="col-12 h2 text-center">
     Server pagination
    </div>
    <article class="col-3 mx-auto border" v-for="tool in pagination1.items">
      <div class="title">
        <h3>{{ tool.name | capitalizeFirstLetter }}</h3>
      </div>
      <div class="description">
        {{ tool.pantone_value }}
      </div>
    </article>
  </div>
  <div class="row mt-2">
    <div class="col-12">
      <b-pagination
        v-model="pagination1.current_page"
        :per-page="pagination1.per_page"
        :total-rows="pagination1.total_rows"
        aria-controls="tools_list_1"
        >
      </b-pagination>
    </div>
  </div>
  <div id="tools_list_2" class="row">
    <div class="col-12 h2 text-center">
      Client pagination
    </div>
    <article class="col-3 mx-auto border" v-for="tool in pagination2CurrentItems">
      <div class="title">
        <h3>{{ tool.name | capitalizeFirstLetter }}</h3>
      </div>
      <div class="description">
        {{ tool.pantone_value }}
      </div>
    </article>
  </div>
  <div class="row mt-2">
    <div class="col-12">
      <b-pagination
        v-model="pagination2.current_page"
        :per-page="pagination2.per_page"
        :total-rows="pagination2.total_rows"
        aria-controls="tools_list_2"
        >
      </b-pagination>
    </div>
  </div>
</div>