如何解决TSX中间带有椭圆的分页器
因此,如果分页超过10页,我将尝试在分页中途出现省略号(例如:1 2 3 4 ... 11 12 13 14)。我以多种不同的方式尝试它,但是作为初学者,我需要帮助。任何人都将基于我所做的事情有一个想法,我应该改变以实现自己的目标?我的项目在React中,但是这个文件是.TSX
这是我的代码:
const Paginator: FC<PaginatorProps> = (props) => {
const { count,page,per_page,pages,changePage,classNames } = props;
const pagesArray = [];
for (let i = 0; i < pages; i++) { pagesArray.push(i); }
return (
// @Todo: bg-gray-800 for modals,this should be added in the classNames everywhere it's called
<div className={`bg-gray-700 text-gray-200 px-4 py-3 flex items-center justify-between sm:px-6 ${classNames}`}>
<div className="flex-1 flex justify-between sm:hidden">
<a onClick={() => changePage(page > 1 ? page - 1 : page)} className="relative inline-flex items-center px-4 py-2 border border-gray-600 text-sm leading-5 font-medium rounded-md hover:text-primary focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active: transition ease-in-out duration-150">
PrevIoUs
</a>
<a onClick={() => changePage(page < pages ? page + 1 : page)} className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-600 text-sm leading-5 font-medium rounded-md hover:text-primary focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active: transition ease-in-out duration-150">
Next
</a>
</div>
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p className="text-sm leading-5 ">
Showing
<span className="font-medium"> {page * per_page - per_page + 1} </span>
to
<span className="font-medium"> {page * per_page < count ? page * per_page : count} </span>
of
<span className="font-medium"> {count} </span>
results
</p>
</div>
<div>
<nav className="relative z-0 inline-flex shadow-sm">
<a onClick={() => changePage(page > 1 ? page - 1 : page)} className={` relative cursor-pointer inline-flex items-center px-2 py-2 rounded-l-md border border-gray-600 text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150`} aria-label="PrevIoUs">
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
</a>
{
pagesArray.map((index) => {
return (
<a onClick={() => changePage(index + 1)} className={`-ml-px ${index+1===page ? 'text-primary':''} cursor-pointer relative inline-flex items-center px-4 py-2 border border-gray-600 text-sm leading-5 font-medium hover:text-primary focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active: transition ease-in-out duration-150`}>
{index + 1}
</a>
);
})
}
<a onClick={() => changePage(page < pages ? page + 1 : page)} className={` -ml-px cursor-pointer relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-600 text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150`} aria-label="Next">
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
);
};
知道我已将我的数据(计数,页面,每页,页面)从另一个组件传递给它。
解决方法
所以我终于找到了解决该问题的方法,使用条件并为要显示的第一项和最后一项添加两个变量。
即使是艰难的显示也会与我尝试获得的显示稍有不同,因为在这里分页将导致类似:
1 ... 4 5 6 ... 10
剩下要做的就是在所选元素中返回 pagesArray ,并在其前面使用扩频运算符以显示所有数组。
这是我的工作方式:
import React,{ FC,useEffect,useState } from 'react';
import {PaginatorProps} from './Paginator.model'
import PropTypes from 'prop-types';
const Paginator: FC<PaginatorProps> = (props) => {
const { count,page,per_page,pages,changePage,classNames } = props
const [pagesArray,setPagesArray] = useState([]);
useEffect(() => {
let pageCollapseStart = false;
let pageCollapseEnd = false;
const arrayPaginate = [];
for (let index = 1; index <= pages; index++) {
const isFirstPage = index === 1;
const isLastPage = index === pages;
const isPreviousPage = index === page - 1;
const isCurrentPage = index === page;
const isNextPage = index === page + 1;
let component = null;
if (isFirstPage || isLastPage || isPreviousPage || isCurrentPage || isNextPage) {
component = (
<a onClick={() => changePage(index)} className={`-ml-px ${isCurrentPage ? 'text-primary':''} cursor-pointer relative inline-flex items-center px-4 py-2 border border-gray-600 text-sm leading-5 font-medium hover:text-primary focus:z-10 focus:outline- none focus:border-blue-300 focus:shadow-outline-blue active:bg- gray-100 active: transition ease-in-out duration-150`}>
{ index }
</a>
);
} else if (index > 1 && index <= 3 && page >= 3 && !pageCollapseStart) {
pageCollapseStart = true;
component = (<span className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-600 text-sm leading-5 font-medium">... </span>
);
} else if (index < pages && index >= pages - 3 && page <= pages - 3 && !pageCollapseEnd) {
pageCollapseEnd = true;
component = (<span className="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-600 text-sm leading-5 font-medium">...</span>);
}
arrayPaginate.push(component);
}
setPagesArray(arrayPaginate);
},[page,pages]);
return(
<div className={`bg-gray-700 text-gray-200 px-4 py-3 flex items-center justify-between sm:px-6 ${classNames}`}>
<div className="flex-1 flex justify-between sm:hidden">
<a onClick={() => changePage(page > 1 ? page - 1 : page)} className="relative inline-flex items-center px-4 py-2 border border-gray-600 text-sm leading-5 font-medium rounded-md hover:text-primary focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active: transition ease-in-out duration-150">
Previous
</a>
<a onClick={() => changePage(page < pages ? page + 1 : page)} className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-600 text-sm leading-5 font-medium rounded-md hover:text-primary focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active: transition ease-in-out duration-150">
Next
</a>
</div>
<div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p className="text-sm leading-5 ">
Showing
<span className="font-medium"> {page * per_page - per_page + 1} </span>
to
<span className="font-medium"> {page * per_page < count ? page * per_page : count} </span>
of
<span className="font-medium"> {count} </span>
results
</p>
</div>
<div>
<nav className="relative z-0 inline-flex shadow-sm">
<a onClick={() => changePage(page > 1 ? page - 1 : page)} className={` relative cursor-pointer inline-flex items-center px-2 py-2 rounded-l-md border border-gray-600 text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150`} aria-label="Previous">
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
</a>
{ ...pagesArray }
<a onClick={() => changePage(page < pages ? page + 1 : page)} className={` -ml-px cursor-pointer relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-600 text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150`} aria-label="Next">
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
</a>
</nav>
</div>
</div>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。