Search code examples
vuejs2vue-tables-2

Vue Tables 2 - perPageValues option not working correctly

I am using Vue Js v.2.4.4 and trying to configurate vue-tables-2 plugin.

I have a list of rows and I am trying to limit them with the perPageValues option, here is my options:

options: {
                    filterByColumn: false,
                    filterable:['nickname','email','reg_date','year'],
                    perPage:100,
                    perPageValues: [10,25,50,100,500,1000],
                    texts: {
                        filter: "Search:",
                        filterBy: 'Search by {column}',
                        count: ''
                    },
                    dateColumns: ['reg_date'],
                    dateFormat: 'DD-MM-YYYY',
                    datepickerOptions: {
                        showDropdowns: true,
                        autoUpdateInput: true,
                    },
                    pagination: { chunk:10, dropdown: false },
                    headings: {
                        id: 'ID',
                        reg_date: 'Registered',
                        nickname: 'Nickname',
                        email: 'Email',
                        year: 'Registration date',
                        number: 'Number'
                    }
                }

Everything is working fine, but the list of limitation-values showing only the first two elements:

enter image description here

No errors were provided in the console and the table filtering through this combobox is working without any possible issues.

The only thing is, when I am using a small values in the perPageValues option like this:

perPageValues: [1,3,6,7,9,11,13],

The full list of values is shown and everything is working correctly: enter image description here

I conducted an observation and found that every number after 20 are not showing at all (from time to time).

Can you please give some advice to know which thing could provoke this issue?

Is it possible to fix this without fixing a plugin sources e.t.c.?

p.s. I am using this vue component without any other settings or components, in the test mode so there is no plugins incompatibility of versions e.t.c. Thanks!

Solution

  • it's possible that that happens because you do not have that amount of records

    you can try this

    in your css:

    .VueTables__limit {
display: none;
}

    this will make the default selector disappear

    in your vue template adds a new select: 

    <select @change="$refs.table.setLimit($event.target.value)">
                        <option value="10">5</option>
                        <option value="10">10</option>
                        <option value="20">20</option>
</select>

    add the reference in the table you are generating

     <v-client-table ref="table"  :options="yourOptions" :data="yourData"  :columns="yourColumns" ></v-client-table>

    JSfiddle: https://jsfiddle.net/jfa5t4sm/1868/