constsampleData=['a','b','c'];consttotalRecord=sampleData.length;constpgnOption={page: 0,// start at 1st pageincrement: [1,2],// typically for select dropdown: 1 per page, 2 per pageincrementIdx: 0,// means increment is 1 from abovemaxSpread: 3};// using builtin Type under `PgnType` namespace (no import required)letsomeOption: PgnType.IOption;// get the pagination state onlyconstpgnState=pgnHandle.getState(totalRecord,pgnOption);const{
perPage,
totalPage,
curr,
pageNo,
startIdx,
endIdx,
first,
prev,
next,
last,
totalRecord,
startRecord,
endRecord,
ltSpread,
rtSpread,
maxSpread
}=pgnState;// get the corresponding "visible" data sliceconstsampleDataSlice=sampleData.slice(startIdx,endIdx);// get the generic pagination element attributes to construct elements on your ownconstgenericComponentAttr=pgnHandle.createGenericCmpAttr({
totalRecord,state: pgnState,option: pgnOption,callback: ()=>console.log('pgn state changed')});const{
firstBtnAttr,
prevBtnAttr,
nextBtnAttr,
lastBtnAttr,
ltSpreadBtnsAttr,
rtSpreadBtnsAttr,
pageSelectAttr,
perPageSelectAttr,}=genericComponentAttr;
Use the Generic Attributes to create your own element/component
// start with page 0constpgnStateOne=pgnHandle.getState(totalRecord,pgnOption);// go to next pageconstpgnStateTwo=pgnHandle.getState(totalRecord,{
...pgnOption,page: pgnStateOne.next});
API
Pagination State Object pgnState
Property
Type
Description
perPage
integer
current total number displayed/allowed per page
totalPage
integer
total number of pages
curr
integer
current page index (starts from 0)
pageNo
integer
current page number (starts from 1)
startIdx
integer
start index (inclusive) for the sliced data
endIdx
integer
end index (exclusive) for the sliced data
first
integer
index for first page
prev
integer
index for previous page
next
integer
index for next page
last
integer
index for last page
totalRecord
integer
total number of records in data
startRecord
integer
starting index for current displayed data
endRecord
integer
end index (non-inclusive) for current displayed data
ltSpread
integer or string
either a number (if less than the maxSpread) or '...' to indicate the non-displayed pages
rtSpread
integer or string
either a number (if less than the maxSpread) or '...' to indicate the non-displayed pages
maxSpread
integer
total page interval that is represented by the spread '...', i.e. not shown
Pagination Option Object pgnOption
Property
Type
Description
page
integer
index for default/starting page number (starts from 0)
increment
array of integers
available increments typically for the dropdown, e.g. [10, 20]
incrementIdx
integer
the default increment value above
maxSpread
integer
maximum number of page interval that is represented by the spread '...'
General Button Attribute Object firstBtnAttr/prevBtnAttr/nextBtnAttr/lastBtnAttr
Property
Type
Description
title
string
name of the button, one of the values: firstprevnextlast
disabled
boolean
whether the button is disabled based on the current pagination state
onClick
function
page navigation callback when the button is clicked