BootstrapVue b-table not storing selected rows when changing pages using b-pagination

Question

I have the following b-table and b-pagination in my template:

<b-table
  bordered
  hover
  responsive
  :items="items"
  :fields="fields"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
  sort-icon-left
  :filter="searchFilter"
  @filtered="onFiltered"
  :filter-included-fields="filterOn"
  :per-page="perPage"
  :current-page="currentPage"
  class="table1"
  ref="table1"
  selectable
  @row-selected="selectedRow"
  :tbody-tr-class="styleRow"
>
  <template #cell(selected)="{ rowSelected }">
      <template v-if="rowSelected">
          <span class="sr-only">Selected</span>
      </template>
      <template v-else>
          <span class="sr-only">Not selected</span>
      </template>
  </template>
</b-table>

<b-pagination
  v-model="currentPage"
  :total-rows="totalRows"
  :per-page="perPage"
  align="center"
  limit="15"
></b-pagination>

In my Vue app, I have the following functions for when the user selects a row:

export default {
  data() {
    return {
      items: [],
      sortBy: 'build',
      sortDesc: true,
      searchFilter: '',
      perPage: 11,
      currentPage: 10,
      totalRows: 1,
      fields: [],
      defaultFields: [],
      fieldNames: [],
      filterOn: [],
      selectedInfo: { item: {}, value: {}, field: {} },
      selected: [],
    };
  },
  methods: {
    styleRow(item) {
      if (item.selected) {
        return ['b-table-row-selected', 'table-secondary'];
      }
      return [];
    },
    selectedRow(items) {
      this.selected = items;
    }
  },
};

Here's the problem: let's say the user selects a few rows on page 1 of the table, then goes to page 2, and then goes back to page 1. The previously clicked rows are no longer selected. How do I fix this? How do I prevent pagination from resetting the selected rows?

J.C. Fong · Accepted Answer · 2022-01-19 08:43:15Z

0

Based on BootstrapVue documentation, Sorting/filtering/paginating the table will clear the active selection. The row-selected event will be emitted with an empty array ([]) if needed.

My suggestion is to store the selected rows to another variable (eg: selectedList: []) on row-selected, so that it will not emitted with an empty array when pagination trigerred. Then, append the selectedList on refreshed Event, so that when you go to next page or ack to previous page, selectedList variable will hold all rows you've selected.

answered Jan 19, 2022 at 8:43

J.C. Fong

5468 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

BootstrapVue b-table not storing selected rows when changing pages using b-pagination

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related