vue b-table customize pagination to show all rows

Question

I am using bootstrap-vue. For pagination of a b-table, I used b-pagination component with the following code for the template:

<div class="description perpage">Per page</div>

  <b-form-select class="numPerPage" v-model="perPage" :options="pageOptions"></b-form-select>

  <b-col sm="7" md="6" class="pagination">
    <b-pagination
      :total-rows="totalRows"
      v-model="currentPage"
      :per-page="perPage"
      align="fill"
      class="my-0"
      aria-controls="my-table"
      last-number
    ></b-pagination>
  </b-col>

  <div class="description found">Found: {{this.totalRows}}</div>
</div>

<b-table
  id="my-table"
  show-empty
  striped
  hover
  sticky-header="true"
  :items="filteredItems"
  :fields="fields"
  :per-page="perPage"
  :current-page="currentPage"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc">

and the following for the script part:

data() {
return {
  totalRows: 1,
  perPage: 10,
  currentPage: 1,
  sortBy: "name",
  sortDesc: false,
  pageOptions: [5, 10, 20, 50, "show all"],
  fields: [..myfields]

};

}

And if I use "show all" in the options field it will show all rows, but it will not properly set the pagination to only one available page.

current display

I want to achieve showing the correct pagination option (only one page) or be able to hide the whole pagination when the "show all" option was made.

How can I get this done?

Hiws Hiws · Accepted Answer · 2020-05-07T10:44:54

The easiest way would be to set your show all option to a REALLY high number. To do this you could use the constant Number.MAX_SAFE_INTEGER which contains the number of 9007199254740991.

Which i would safely guess you wont reach in rows.

If you want to hide the pagination completely when the show all option is selected, you could instead set the value to 0. This will show all rows too.

Then you add a v-if to your pagination <b-pagination v-if="perPage !== 0">, which will hide it when that option is selected.

new Vue({
  el: '#app',
  created() {
    for (let i = 0; i < 1000; i++) {
      this.items.push({
        id: i + 1
      });
    }
  },
  computed: {
    totalRows() {
      return this.items.length
    }
  },
  data() {
    return {
      perPage: 10,
      currentPage: 1,
      sortBy: "name",
      sortDesc: false,
      /* Number.MAX_SAFE_INTEGER = 9007199254740991 */
      pageOptions: [5, 10, 20, 50, {
        value: Number.MAX_SAFE_INTEGER,
        text: "show all"
      }],
      items: []
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <div class="description perpage">Per page</div>
  <b-form-select class="numPerPage" v-model="perPage" :options="pageOptions"></b-form-select>

  <b-pagination
    :total-rows="totalRows"
    v-model="currentPage"
    :per-page="perPage"
    align="fill"
    class="my-0"
    aria-controls="my-table"
    ></b-pagination>
  <div class="description found">Found: {{ this.totalRows }}</div>

  <b-table
    id="my-table"
    show-empty
    striped
    hover
    sticky-header="true"
    :items="items"
    :per-page="perPage"
    :current-page="currentPage"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc">
  </b-table>
</div>

vue b-table customize pagination to show all rows

1 Answers