Search code examples
vue.jsbootstrap-vuebootstrap-table

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


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.


Solution

  • 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).