How to get number of rows that displayed on a page on Vue Table

Shannia 0
Viewed 32

I'm doing a project using vue bootstrap and I need to get the number of rows displayed on a page. Let's say I have 24 data and I stored it on a table that use pagination. Each page will contain n rows where n is a dynamic number. How do I achieve "Showing n data from 24 data". I can't really find how because most of the example I found on the internet using data.length which return the length of data which is 24 meanwhile I need it to return n row of data that displayed on that page. I hope my explanation is clear enough.

bootstrap-table bootstrap-vue vue.js
2 Answers

Have a look at this link.

You can bind to the currently displayed rows using v-model on the b-table, where you can find the length of currently displayed items.

You can also bind to the filtered event to find how many items are being shown in total (before pagination).

userqDhy0

Basically, we are the only one who define the rows per page by using :per-page attribute on <b-table>. Hence, we already know what number we are passing as a value in :per-page.

Have a look in below live demo, You will get the idea :

window.onload = () => {
  new Vue({
    el: '#app',
    data: {
      perPage: 3,
      currentPage: 1,
      items: [
        { id: 1, first_name: 'Fred', last_name: 'Flintstone' },
        { id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
        { id: 3, first_name: 'Barney', last_name: 'Rubble' },
        { id: 4, first_name: 'Betty', last_name: 'Rubble' },
        { id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
        { id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
        { id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
        { id: 8, first_name: 'Rockhead', last_name: 'Slate' },
        { id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
      ]
    },
    computed: {
      rows() {
        return this.items.length
      }
    }
  })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<div id="app">
  <div class="overflow-auto">
    <b-pagination
                  v-model="currentPage"
                  :total-rows="rows"
                  :per-page="perPage"
                  aria-controls="my-table"
                  ></b-pagination>

    <p class="mt-3">Current Page: {{ currentPage }}</p>

    <b-table
             id="my-table"
             :items="items"
             :per-page="perPage"
             :current-page="currentPage"
             small
             ></b-table>
  </div>
</div>

Rohìt Jíndal0
Related