"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

What is the best practice for adding one string to the end of another?

Is your custom login form in Web2py not submitting properly?

We are creating a table in JavaScript and mistakenly adding an unnecessary tbody

Which comes first in AngularJS: ng-include or ng-repeat?

What is the process for configuring environment variables in a React application?

Encountering a CORS issue specifically on the client side of a Next.js application when interacting with an API gateway

A guide on managing Ngb Bootstrap carousel slide with a button in Angular

A guide on determining the return type of an overloaded function in TypeScript

Creating a dynamic HTML table using Vue 3

Is there a way for me to manipulate the RGB values of the canvas in such a manner that the Red and Green components of the gradient are determined by dividing the position of my mouse cursor

Tips on obtaining the element selector when a div is being dynamically loaded during an AJAX call

I'm encountering a npm error on Windows_NT 10.0.19042, does anyone know how to troubleshoot this issue?

Encountering a "Error 404: Page Not Found" message when trying to request a json object from a node server

selecting arrays within arrays according to their date values

Compare the versions of React used in the linked library and the workspace application

What is the best way to successfully send an object through AJAX once all its updates are completed?

I keep receiving the same error (ENOENT) for all npm commands

Is it possible to extract a specific value from JSON data by making an AJAX call or applying a filter to the fetched JSON data?

Is there a specific explanation as to why ng-repeat-start is not functioning properly even with the most recent version of AngularJS?

Having trouble triggering a click event on Ant Design menu button using jest and enzyme