Version 1.0.1Custom Pagination in Reactive updated with
Input Param
Parameter
Use
StartIndex
Set the initial index to start pagination.
MaxRecords
Number of records per page.
TotalCount
Total records of list.
ShowGoToPage
Set to true, to show pagination with an input that allows to jump to a specific page.
ExtendedClass
Add custom style classes to the Pattern. You define your custom style classes in your application using CSS.Examples:
IsShowIcon
show icon <,<<,>,>> instead of button First,Previous,Next,Last.
Event:-
OnNavigate :Event triggered on navigate.
Example with no Goto option enabled
With Goto Option Enabled
Example Of icon with no Goto option enable
Example Of icon with Goto option enableUse1.Drag drop block where to use
2.Passing Input
3.Creating Event handler
Custom Pagination Reactive component basically designed for reactive application.
There is reusable web block added in this component.
Here in component, First, Previous.... or Next, Last button added by using user can move to next page or go back previous. Also added can jump to last or first page.
Event: -
OnNavigate: -This event navigates to respective index of page which clicked.
Example of component and use: -
From the above image, pagination added to footer of table.Pagination contains First,Previous button as in disabled state because there is validation like user at 1st page then it get automatically grayed out(disabled) same for Next & Last button if at last page then this two button get disabled. If want to jump any respective page then use ShowGoToPage input param, set it to true so goto option can get visible.
Here in above image the input box next to Previous button is clickable and enter valid index and hit enter button so pagination get navigate to respective page.How to use: -1.Drag drop below the list/table: -
2.Passing Input param: -3.Event & handler: -
Resetting start index and refreshing list which passing as list