我對上面的代碼做了一些改動。通過使用此代碼，用戶可以顯示下 4 個（如果可用）頁面、前 4 個（如果可用）和當前頁面。
第一頁鏈接和上一頁鏈接與最后一頁和下一頁鏈接相同。
因此，一次顯示總共 9 個頁面和 4 個額外鏈接。
該代碼在 React JS 中運行
import React from 'react';
import * as GlobalConfig from '../../providers/globals/config';
import { Link } from "react-router-dom";
function Pagenation(props) {
const loadPage = (page) => {
props.loadPage(page);
};
const totalEntries = props.paginationObj.totalEntries;
const totalPage = props.paginationObj.totalPage;
const currentPage = props.paginationObj.currentPage;
const nextPage = props.paginationObj.nextPage;
const perPage = GlobalConfig.perPage;
const start = (props.paginationObj.skipEntries + 1);
const end = ((props.paginationObj.skipEntries + perPage) < totalEntries) ? (props.paginationObj.skipEntries + perPage) : totalEntries;
const PagesLink = () => {
let pages = [];
// first & next page links
pages.push(
<li key={'first'} onClick={(e) => loadPage(1)} className={(currentPage === 1) ? 'paginate_button page-item previous disabled' : 'paginate_button page-item previous'}>
<Link to="#" aria-controls="listingTable" data-dt-idx="0" className="page-link"><< First</Link>
</li>
);
pages.push(
<li key={'previous'} onClick={(e) => loadPage(((currentPage - 1) < 1) ? 1 : currentPage - 1)} className={(currentPage === 1) ? 'paginate_button page-item previous disabled' : 'paginate_button page-item previous'}>
<Link to="#" aria-controls="listingTable" data-dt-idx="0" className="page-link">< Previous</Link>
</li>
);
// display previous pages links
let previousLinks = currentPage - 4;
for (let i = previousLinks; i <= currentPage; i++) {
if (i < currentPage && i > 0) {
pages.push(
<li key={i} onClick={(e) => loadPage(i)} className={(currentPage === i) ? 'paginate_button page-item active' : 'paginate_button page-item'}>
<Link to="#" aria-controls="listingTable" data-dt-idx="1" className="page-link">{i}</Link>
</li>
);
}
}
// display next pages links
let nextLinks = (currentPage < totalPage) ? (currentPage + 4) : currentPage;
for (let i = currentPage; i <= nextLinks; i++) {
if (i <= totalPage) {
pages.push(
<li key={i} onClick={(e) => loadPage(i)} className={(currentPage === i) ? 'paginate_button page-item active' : 'paginate_button page-item'}>
<Link to="#" aria-controls="listingTable" data-dt-idx="1" className="page-link">{i}</Link>
</li>
);
}
}
// next & last page links
pages.push(
<li key={'next'} onClick={(e) => loadPage(((currentPage + 1) > totalPage) ? totalPage : currentPage + 1)} className={(nextPage) ? 'paginate_button page-item next' : 'paginate_button page-item next disabled'}>
<Link to="#" aria-controls="listingTable" data-dt-idx="2" className="page-link">Next ></Link>
</li>
);
pages.push(
<li key={'last'} onClick={(e) => loadPage(totalPage)} className={(nextPage) ? 'paginate_button page-item next' : 'paginate_button page-item next disabled'}>
<Link to="#" aria-controls="listingTable" data-dt-idx="2" className="page-link">Last >></Link>
</li>
);
return pages;
}
return (
<>
{totalEntries > 0 &&
<div className="pagenation-foot d-flex align-items-center justify-content-between">
<div className="totlecountpage"> <span id="displayed-record">Showing {start}-{end}</span> of {totalEntries} entries</div>
<div className="countingpaging">
<div className="dataTables_paginate paging_simple_numbers" id="listingTable_paginate">
<ul className="pagination">
<PagesLink />
</ul>
</div>
</div>
</div>
}
</>
)
}
export default Pagenation;
