Add a prop to limit the number of visible page links in a Pagination component #773
Description
Description
When using the Pagination component, the page links number visible is equal to:
Math.ceil(number of items / number of items per page) (lets name that number pageTotal)
When the number of items is important compared to the number of items per page it can lead to a long list of page links (see below).
It would be handy to have a prop on the component available to limit the number of page visible (lets name it visiblePageTotal).
The new behaviour would be as follows:
When visiblePageTotal > pageTotal
The Pagination behaves as before
When visiblePageTotal < pageTotal:
The component displays Math.floor((visiblePageTotal-1)/2) before the selected page and Math.ceil((visiblePageTotal-1)/2) after the selected page. To say it in simpler word, it displays half of the total visible pages before the selectedPage and half of the total visible pages after the selectedPage (for odd number, the element over goes on the right).
When the selectedPage does not allow to display half of the total on the right or on the left because selectedPage is too close to a border, the add-on are filled on the side where there are available pages.
Some examples
Example 1
Total Page = 5
Total Visible Page = 4
Selected Page = 1
Result:
Example 2
Total Page = 5
Total Visible Page = 4
Selected Page = 2
Result:
Example 3
Total Page = 5
Total Visible Page = 4
Selected Page = 3
Result:
Example 4
Total Page = 5
Total Visible Page = 4
Selected Page = 5
Result:
Versions
fundamental-react: 0.7.0-rc.76
fundamental-styles: 0.3.0-rc.4
NOTE: Where applicable, please include uncropped screen captures.
DISCLAIMER:
After triaging an issue, the fundamental-react team will see if it can be reproduced or confirmed. If more information is needed, the fundamental-react team will contact the author. Any issues awaiting responses from the author for more than 7 days will be closed. The author can re-open the issue at a later time if they can present the requested information.