I'm confused how to add pagination with get data from api using reactstrap.
I have response like this:
{
current_page: 1
detail: [,…]
first_page_url: "dashboard/greatflashsale/?page=1"
from: 1
last_page: 2
last_page_url: "dashboard/greatflashsale/?page=2"
next_page_url: "dashboard/greatflashsale/?page=2"
path: "dashboard/greatflashsale/"
per_page: 10
prev_page_url: null
to: 10
total:15
}
and this is my code:
const FlashData = () => {
const dispatch = useDispatch()
const [page, setPage] = useState(1)
const { flashSale } = useSelector((state) => state.data)
useEffect(() => {
dispatch(getdata(page))
}, [dispatch])
return(
<>
/*some code here...*/
<div className="pagin">
<Pagination>
<PaginationItem>
<PaginationLink
first
href={flashSale.first_page_url}
/>
</PaginationItem>
<PaginationItem>
<PaginationLink
href={flashSale.prev_page_url}
previous
/>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
4
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
5
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink
href={flashSale.next_page_url}
next
/>
</PaginationItem>
<PaginationItem>
<PaginationLink
href={flashSale.last_page_url}
last
/>
</PaginationItem>
</Pagination>
</div>
</>
)
}
I didn't find the answer in some forums