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>
 );
}