I have a table with pagination in my Vue project. I have those fields:
tableItemsPerPage contains the number of items to show per page (10, 25, 50, 100).tableCrrentPage contains the current page number.items contains the items (array).I want to display the following message:
Showing 1 to 10 out of 1500 records.
Showing 11 to 20 out of 1500 records.
...
The code:
getRecordsText: function() {
var records_amount = this.items.length;
var start = this.tableCrrentPage;
var end = this.tableCrrentPage;
return start + " to " + end + " out of " + records_amount + " records";
}
I'm not sure how to calculate start and end based on those fields. Is there a formula I could construct that can show the messages?
See table below
1 2 3 4
5 6 7 8
9 a b c
here tableItemsPerPage = 4
assuming tableCrrentPage is initially 0
you get
{ start, end } = { start: (tableCrrentPage * 4 ) + 1, end: (tableCrrentPage * 4 ) + 4 }
x= (p, n) => ({ start: (p * n) + 1, end: (p * n) + n })
console.log('10 items per page')
console.log(x(0, 10))
console.log(x(1, 10))
console.log(x(2, 10))
console.log('20 items per page')
console.log(x(0, 20))
console.log(x(1, 20))
console.log(x(2, 20))