Good morning, Plone community!
I am in the process of using the built-in pagination feature for Volto however, nothing seems to work when I click on the toolbar buttons.
The code I used for the Pagination is below:
<div className="contents-pagination">
<Pagination
current={currentPage}
total={Math.ceil(total / pageSize)}
pageSize={pageSize}
pageSizes={[5, 10, 15, 20, 25]}
onChangePage={onChangePage}
onChangePageSize={onChangePageSize}
/>
</div>
And here are the functions I used for the above feature:
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
import { Container, Menu, Table, Modal } from 'semantic-ui-react';
import { searchContent } from '@plone/volto/actions';
import { Pagination } from '@plone/volto/components';
import moment from 'moment';
import PDFViews from '../../PDFViews/PDFViews';
import ContentStatusHistory from '../../ContentStatusHistory/ContentStatusHistory';
import History from '../../History/History';
import SearchWidget from '../../../../../../../omelette/src/components/theme/SearchWidget/SearchWidget';
const ContentListingView = () => {
const content = useSelector((store) => store.content.data);
const results = useSelector(
(state) => state.search.subrequests.content?.items,
);
const total = content.items_total;
const dispatch = useDispatch();
const [currentPage, setCurrentPage] = React.useState(0);
const [pageSize, setPageSize] = React.useState(25);
React.useEffect(() => {
dispatch(
searchContent(
'/',
{
meta_type: 'Dexterity Item',
metadata_fields: '_all',
b_size: pageSize,
b_start: currentPage * pageSize,
fullobjects: true,
},
'content',
),
);
}, [currentPage, dispatch, pageSize]);
const onChangePage = (event) => {
event.preventDefault();
setCurrentPage(event.target.value);
};
const onChangePageSize = (event) => {
event.preventDefault();
setPageSize(event.target.value);
setCurrentPage(0);
};
return (<Container>..{Pagination Feature Goes In Here!}..</Container>);
};
export default ContentListingView;