Я очень новичок, чтобы реагировать, и я столкнулся с проблемой выбора нумерации страниц. У меня есть компонент разбиения на страницы, который я сделал из пример 1 и пример 2 . Я извлек выпадающий список в свой компонент.
Я могу выбрать страницы пагинации, я также могу выбрать опцию выпадающего меню, чтобы изменить пейджинговый пейджер.
Проблема: если я на последней странице раскрывающегося меню и в раскрывающемся меню выберите другой параметр, дополнительная страница «-1» добавляется к передней части пейджинговой страницы…
Например: выбрано начальное количество страниц 2, пейджер показывает страницы 1 - 14. Выберите количество страниц до 10, перейдите к последней странице. Выберите количество страниц до 2, пейджер показывает страницы -1, 1 - 14. Я не уверен, откуда берется -1, но больше -1 появляется, когда я повторяю вариант использования.
Я думал, что проблема в этом разделе в компоненте Pagination, но мне не повезло ...
// pager pages
for (let i = startPage; i < groupCount + startPage; i++) {
// console.log(startPage);
if (i <= totalPages - 1) {
pages.push(<li onClick={e => getPage(i)} className={currentPage === i ? styles.active : ""} key={i} id={i}>{i}</li>);
}
}
Я включил приведенный ниже код и GIF ошибки . Буду очень признателен за любую помощь в поиске кода или в правильном направлении. Заранее спасибо!
Компонент нумерации страниц
function Pagination(props) {
// get items from object
const items = props.items;
// get items count from items.total_count
const itemsLength = items.length;
// const [dataLength, setDataLength] = useState(props.itemsLength);
const [pageCount, setPageCount] = useState(props.pageCount);
// get total # of pages for pager
const totalPages = Math.ceil(itemsLength/pageCount);
const [currentPage, setCurrentPage] = useState(props.currentPage);
const [groupCount, setGroupCount] = useState(props.groupCount);
const [startPage, setStartPage] = useState(props.startPage);
const [paging, setPaging] = useState({
currentPage: '',
pageCount: ''
});
const displayCountOptions = props.displayCountOptions ? (
<DropDownSelect
legend={props.viewOptionHelpText}
options={props.viewOptions}
defaultSelectedOption={0}
selectionID={props.viewOptionID}
changeFunc={e => confirmPageCount(e.target.value)}
size={props.viewOptionSize}
layout={props.viewOptionLayout}
/>
) : ('');
function createPager(totalPages) {
let pages = [];
if (totalPages <= 10) {
// previous
pages.push(<li onClick={e => getPrev(currentPage)} className={currentPage === 1 ? styles.nomore : ""} key={0}>Prev</li>);
// pager pages
for (let i = 1; i <= totalPages; i++) {
pages.push(<li onClick={e => getPage(i)} className={currentPage === i ? styles.active : ""} key={i}>{i}</li>);
}
// next
pages.push(<li onClick={e => getNext(currentPage, totalPages)} className={currentPage === totalPages ? styles.nomore : ""} key={totalPages + 1}>Next</li>);
} else {
// previous
pages.push(<li onClick={e => getPrev(currentPage)} className={currentPage === 1 ? styles.nomore : ""} key={0}>Prev</li>);
// if startPage is greater than groupCount
if (startPage > groupCount) {
// set first page as 1
pages.push(<li onClick={e => getPage(1)} className={currentPage === 1 ? styles.active : ""} key={1}>1</li>);
// ellipsis ...
pages.push(<li onClick={e => getPage(startPage - groupCount)} className={styles.ellipsis} key={-2}>···</li>);
}
// pager pages
for (let i = startPage; i < groupCount + startPage; i++) {
// console.log(startPage);
if (i <= totalPages - 1) {
pages.push(<li onClick={e => getPage(i)} className={currentPage === i ? styles.active : ""} key={i} id={i}>{i}</li>);
}
}
// ellipsis ...
if (totalPages - startPage > groupCount) {
pages.push(<li onClick={e => getPage(startPage + groupCount)} className={styles.ellipsis} key={-1}>···</li>);
}
// last page
pages.push(<li className={currentPage === totalPages ? styles.active : ""} key={totalPages} onClick={e => getPage(totalPages)}>{totalPages}</li>);
// next
pages.push(<li onClick={e => getNext(currentPage, totalPages)} className={currentPage === totalPages ? styles.nomore : ""} key={totalPages + 1}>Next</li>);
}
return pages;
}
function getPage(currentPage, reset = false) {
setCurrentPage(currentPage);
// console.log(currentPage);
// handles getPage for prev page
if (currentPage % groupCount === 1) {
setStartPage(currentPage);
}
// handles getPage for next page
if (currentPage % groupCount === 0) {
setStartPage(currentPage - groupCount + 1);
}
// last page
if (totalPages - currentPage < 1) {
setStartPage(totalPages - groupCount);
}
if (reset === true) {
setCurrentPage(1);
setStartPage(1);
}
setTimeout(()=>{
setPaging({
currentPage: currentPage,
pageCount: pageCount
});
});
// console.log(paging);
}
function getPrev(currentPage) {
if (--currentPage === 0) {
return;
}
getPage(currentPage);
}
function getNext(currentPage) {
if (++currentPage > totalPages) {
return;
}
getPage(currentPage);
}
function confirmPageCount(pageCount){
setPageCount(pageCount);
console.log(pageCount);
console.log(totalPages);
setTimeout(()=>{
getPage(currentPage, true);
}, 0);
}
const [upperLimit, setUpperLimit] = useState(undefined);
const [paginatedData, setPaginatedData] = useState([]);
function createPaginatedData(pageCount) {
setUpperLimit(currentPage * pageCount);
const itemsSlice = items.slice((upperLimit - pageCount), upperLimit);
setPaginatedData(itemsSlice);
}
useEffect(() => {
createPaginatedData(pageCount);
}), [pageCount];
const pages = createPager(totalPages);
return(
<React.Fragment>
<div className={styles.main}>
{displayCountOptions}
<ul className={styles.page}>
{pages}
</ul>
</div>
<div className='pagination-results'>
{React.cloneElement(props.children, {items: paginatedData})}
</div>
</React.Fragment>
);
}
DropDownSelect, компонент
function DropDownSelect(props) {
// const { themeContext } = useContext(ThemeContext);
const dropDownSelectGroup = cx({
dropDownSelectGroup: true,
[`${props.layout}`]: true,
// [`${themeContext.theme}Theme`]: true
});
const dropDownSelections = cx({
dropDownSelections: true
});
const selectionsUl = cx({
[`${props.size}`]: true,
hide: true
});
const [defaultOption, setDefaultOption] = useState(props.defaultSelectedOption);
const [selected, setSelected] = useState(defaultOption);
const [pageCountEle, setPageCountEle] = useState(undefined);
function createLabel(item) {
var splitItem = item.split(/[ ,]+/).filter(Boolean);
var finalItem = splitItem.join('');
return 'select' + finalItem;
}
const selectID = props.selectionID ? props.selectionID : '';
useEffect(() => {
setPageCountEle(document.querySelector(`#${selectID}`));
});
const legend = props.legend ? (
<label htmlFor={createLabel(props.legend)} className={styles.helpText}>{props.legend}</label>
) : (
''
);
// props changefunc takes in a function and attach it to when drop down select value is changed
function handleChange(e) {
//if prevent default is false, use html submit, not this function
if (!props.preventDefault) {
return;
}
//stop html submit
e.preventDefault();
//execute the changeFunc function passed in via props
props.changeFunc(e);
}
function changeOption(e) {
// console.log(e.target);
pageCountEle.innerHTML = e.target.innerHTML;
pageCountEle.parentNode.className = selectionsUl;
pageCountEle.parentNode.className += " " + styles.hide;
}
function chooseOption(e){
// console.log(e);
const parentUI = e.parentNode;
// console.log(pageCountEle.parentNode);
if (parentUI.classList.contains(styles.hide)) {
parentUI.classList.remove(styles.hide);
} else {
parentUI.className += " " + styles.hide;
}
}
const selections = props.options ? (
<div className={dropDownSelections}>
<ul
className={selectionsUl}
value={defaultOption}
>
<li
id={selectID}
onClick={e => chooseOption(e.target)}
>{props.options[defaultOption].label}</li>
{props.options.map((option, index) => {
return <li id={option.value} key={index} value={option.value}
onClick={e => {changeOption(e); handleChange(e);}}
>{option.label}</li>
})}
</ul>
</div>
) : (
''
);
return (
<div className={dropDownSelectGroup}>
{legend}
{selections}
</div>
);
}