因此，如果页面中有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>
);
};
知道我将数据(count、page、per_page、pages(从另一个组件传递给它。
所以我终于找到了一个解决问题的方法，使用一个条件并添加两个变量来显示第一个和最后一个项目。
即使很难，显示也会与我试图得到的略有不同，因为这里的分页会导致类似的结果：
1。。。4 5 6。。。10
然后所要做的就是在所选元素中返回pagesArray，并在前面使用spread运算符来显示所有数组。
以下是我是如何做到的：
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>
);
}