"Customize the number of items displayed per page with Bootstrap Vue's perPage

Question

"Customize the number of items displayed per page with Bootstrap Vue's perPage

I am currently working on a Vue project which you can view on codesandbox and utilizing bootstrap-vue.

Within the project, there are multiple columns containing cards along with pagination:

<template>

  <b-container>
    <b-row 
      :current-page="currentPage"
      :per-page="perPage">   

      <b-col cols="12" sm="4" class="my-1"
        v-for="item in items" 
          :key="item.id">

        <b-card           
          :bg-variant="item.variant"
          text-variant="white"
          header="item.title"
          class="text-center"
          >
          <p class="card-text">
            {{item.body}}
          </p>
        </b-card>  

      </b-col>

    </b-row>

    <b-row>
      <b-col md="6" class="my-1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
      </b-col>
    </b-row>
  </b-container>

</template>

I am currently looking for guidance on how to set the perPage property in bootstrap-vue for custom columns or rows similar to bootstraps table pagination functionality.

The desired outcome is to display 2 columns with cards per page using perPage: 2.

Question: Can anyone provide assistance on setting the bootstrap-vue perPage for custom columns or rows?

javascript vue.js vuejs2 vue-component bootstrap-vue

Answer 1

Answer №1

If you're looking to display 2 cards per page, I recommend using my solution that utilizes computed properties. In my code, I have implemented a feature called currentPageItems.

computed: {
   ...
   
   currentPageItems() {
          let totalItems = this.items.length;
      this.numOfPages = 0;
        for (let i = 0; i < totalItems; i = i + this.perPage) {
        this.paginated_items[this.numOfPages] = this.items.slice(
          i,
          i + this.perPage
        );
        this.numOfPages++;
      }
       
        return this.paginated_items[this.currentPage-1];
  
    }
    
    ...
  }

I also added these properties in the data():

paginated_items: {},
currentPageIndex:0,
numOfPages:0

In the template section, change items to currentPageItems

...
 <b-col cols="12" sm="4" class="my-1" v-for="item in currentPageItems" :key="item.id">
...

Here is the complete code snippet :

<template>

  <b-container>
    <b-row>   
    
      <b-col cols="12" sm="4" class="my-1"
        :key="index"
        v-for="(item, index) in currentPageItems" 
          >
        <b-card         
          :bg-variant="item.variant"
          text-variant="white"
          :header="item.title"
          class="text-center"
          >
          <p class="card-text">
            {{item.body}}
          </p>
        </b-card>  

      </b-col>

    </b-row>

    <b-row>
      <b-col md="6" class="my-1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
      </b-col>
    </b-row>
  </b-container>

</template>

<script>
const items = [
  {
    title: "Primary",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "primary"
  },
  {
    title: "Secondary",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "secondary"
  },
  {
    title: "Success",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "success"
  },
  {
    title: "Info",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "info"
  },
  {
    title: "Warning",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "warning"
  },
  {
    title: "Danger",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "danger"
  }
];

export default {
  name: "MyBootstrapGrid",
  data() {
    return {
      items: items,
      currentPage: 1,
      perPage: 2,
      totalRows: items.length,
      paginated_items: {},
      currentPageIndex:0,
      numOfPages:0
    };
  },
  computed: {
    pageCount() {
      let total = this.totalRows,
        size = this.perPage;
      return Math.floor(total / size);
    },
      currentPageItems() {
          let totalItems = this.items.length;
      this.numOfPages = 0;
        for (let i = 0; i < totalItems; i = i + this.perPage) {
        this.paginated_items[this.numOfPages] = this.items.slice(
          i,
          i + this.perPage
        );
        this.numOfPages++;
      }
       
        return this.paginated_items[this.currentPage-1];
  
    }
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Answer 2

If you're looking to display 2 cards per page, I recommend using my solution that utilizes computed properties. In my code, I have implemented a feature called currentPageItems.

computed: {
   ...
   
   currentPageItems() {
          let totalItems = this.items.length;
      this.numOfPages = 0;
        for (let i = 0; i < totalItems; i = i + this.perPage) {
        this.paginated_items[this.numOfPages] = this.items.slice(
          i,
          i + this.perPage
        );
        this.numOfPages++;
      }
       
        return this.paginated_items[this.currentPage-1];
  
    }
    
    ...
  }

I also added these properties in the data():

paginated_items: {},
currentPageIndex:0,
numOfPages:0

In the template section, change items to currentPageItems

...
 <b-col cols="12" sm="4" class="my-1" v-for="item in currentPageItems" :key="item.id">
...

Here is the complete code snippet :

<template>

  <b-container>
    <b-row>   
    
      <b-col cols="12" sm="4" class="my-1"
        :key="index"
        v-for="(item, index) in currentPageItems" 
          >
        <b-card         
          :bg-variant="item.variant"
          text-variant="white"
          :header="item.title"
          class="text-center"
          >
          <p class="card-text">
            {{item.body}}
          </p>
        </b-card>  

      </b-col>

    </b-row>

    <b-row>
      <b-col md="6" class="my-1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
      </b-col>
    </b-row>
  </b-container>

</template>

<script>
const items = [
  {
    title: "Primary",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "primary"
  },
  {
    title: "Secondary",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "secondary"
  },
  {
    title: "Success",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "success"
  },
  {
    title: "Info",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "info"
  },
  {
    title: "Warning",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "warning"
  },
  {
    title: "Danger",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "danger"
  }
];

export default {
  name: "MyBootstrapGrid",
  data() {
    return {
      items: items,
      currentPage: 1,
      perPage: 2,
      totalRows: items.length,
      paginated_items: {},
      currentPageIndex:0,
      numOfPages:0
    };
  },
  computed: {
    pageCount() {
      let total = this.totalRows,
        size = this.perPage;
      return Math.floor(total / size);
    },
      currentPageItems() {
          let totalItems = this.items.length;
      this.numOfPages = 0;
        for (let i = 0; i < totalItems; i = i + this.perPage) {
        this.paginated_items[this.numOfPages] = this.items.slice(
          i,
          i + this.perPage
        );
        this.numOfPages++;
      }
       
        return this.paginated_items[this.currentPage-1];
  
    }
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Answer 3

Answer №2

If I interpreted your message correctly, the next step for you would be to paginate the items. Feel free to check out this functioning Sandbox where I have included data for paginatedItems along with methods like paginate and onPageChange.

Answer 4

If I interpreted your message correctly, the next step for you would be to paginate the items. Feel free to check out this functioning Sandbox where I have included data for paginatedItems along with methods like paginate and onPageChange.

"Customize the number of items displayed per page with Bootstrap Vue's perPage

Answer №1

Answer №2

Similar questions

Guide to successfully navigating to a webpage using page.link when the link does not have an id, but is designated by a

How can I perform a cross-domain XMLHTTPREQUEST to communicate with an FTP server using the appropriate syntax?

Launching the forEach function within an ng-repeat loop was it can be done by

What is the best way to conceal a button before printing and have it reappear once the printing process is finished?

Firebase version 9 - Retrieve the content of a referenced document

Confirmation dialog for deletion may not function properly upon initial click

Why does attempting to access an undefined property not trigger an error?

Error encountered when attempting to establish a connection between socket.io and express: network error

Authenticating the identity of the client application - the client is currently within the browser

Attempting to configure a discord bot. Can anyone help me identify the issue?

What is the best way to generate page elements in AngularJS when the total number of pages is already known?

Encountering a Jquery TypeError while trying to update the content on

Schema Connections in Kendo Diagram

Are mutations in Vuex guaranteed to be atomic?

The conceal feature doesn't appear to be functioning properly on jQuery Mobile

Tips for limiting the maximum number of characters in CkEditor 5 for react js

Having trouble getting images to display in Vue markdown?

Toggle the mute and unmute feature for a participant in an AWS Chime meeting

Clearing existing HTML content in the TR body

What are some ways to capture and save the window width prior to launching my Nuxt application?