b-table, get all rows even when paginated

user_18345531 0
Viewed 392

I have a bootstrap vue table and I'm currently limiting it to 10 items per page

<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="tb">
</b-pagination>

<b-table :fields="Fields" :items="items" :per-page="perPage" :current-page="currentPage" id="tb">
</b-table>

Later on, when a button is clicked, I need to go through all the rows of the b-table and extract some data

const table = document.getElementById('tb');

for(let i = 0; i < table.rows.length; i++){
  //logic
}

The issue, is that table.rows only has 10 items in it, because I'm only assigning 10 items per page.

I really need some advice on how to get around this, as I want to be able to go through all the rows of all the pages.

I have thought of the following solutions

1): Temporarily setting my perPage variable to an extremely high number, then doing the logic. This is bad for several reasons (slow, needs to wait for table to finish loading, unfriendly to the UI

2): Somehow still display all the rows in the table but hide/unhide them as the pages change

3): Building my own pagination and not using b-table.

Anyone able to help? Thank you.

bootstrap-vue bootstrap-4
1 Answers

It sounds like you need the result of running a reducer function on the entire collection of records.

If that's the case, you have to forget you have a table, because the result of the function is completely independent of what the table currently displays.

The only thing you need for displaying the result is access to the entire collection or records.

If you already have the collection loaded on client side (in the browser) then the solution is simple. Just run the reducer function on the data collection and display it.

If you don't have the entire dataset loaded, you have to get it from the server.
The wrong way of doing it would be to load all items and apply the reducer on client side.
The right way of doing it would be to create a separate endpoint, which would calculate (server side) and return the result. It has significant advantages:

  • saves bandwidth, big time (you only download the result, not all the items)
  • the result can be cached and only has to be re-calculated when the collection changes
  • servers are typically faster at processing data.
user_18916770
Related