0

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!

Alexey Shabramov
  • 730
  • 1
  • 16
  • 37
  • 3
    The records drop-down list is generated based on total number of records, so if you have less than 25 records then it will show list till 25 and so on. See demo here https://jsfiddle.net/jfa5t4sm/207/ – FarazShuja Jan 27 '18 at 15:30
  • Wow, I didn't know that, thank you very much! Yes, I have really checked your variant with 10000+ rows and it worked fine! Awesome! – Alexey Shabramov Jan 27 '18 at 16:57

2 Answers2

3

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/

Gonzalo Milde
  • 46
  • 2
  • In order to make selector disappear, no css needed, you can simply use `perPageValues: []` – tonjo Dec 09 '19 at 10:14
3

This isn't an answer to the question but if anyone ends up here wondering how to turn off the "Records:" dropdown completely via the options, you can do it like this...

options: {
    perPage: 5,
    perPageValues: [], 
}
centralscru
  • 6,580
  • 3
  • 32
  • 43