分页显示 5 页并隐藏其余页面

Question

我试图设计一个带有分页的结果显示页面。我可以显示所有页面或 5 页。我想逐步显示 5 页。

这段代码的问题在于，它显示了所有页面。如果有 12 个页面，则显示 12 个按钮。

var length = response.length;

console.log(length);

function pagination(length){

    var size = Math.ceil(length/10);

    

    var pageDiv = $('.pagination');

    var pageDivData = "";

    pageDivData += "<a href='javascript:void(0)' id='firstPage' class='firstPage'>&laquo;</a>";

    var stepSize = 5;

    var stepCount = Math.ceil(size/stepSize);

    console.log(stepCount);

    for(var step = 1; step<stepCount; step++){

        for(var i=id; i<=stepSize; i++){

            if(id == i){

                pageDivData +="<a href='javascript:void(0)' class='pageNo active' id='"+i+"'>"+i+"</a>";

            }else{

                pageDivData +="<a href='javascript:void(0)' class='pageNo' id='"+i+"'>"+i+"</a>";

            }

        }

        stepSize++;

    }

    pageDivData += "<a href='javascript:void(0)'>...</a>";

    pageDivData += "<a href='javascript:void(0)' class='pageNo id='"+size+"'>"+(size)+"</a>";

    if(id!=size){

        pageDivData += "<a href='javascript:void(0)' id='lastPage'>&raquo;</a>";

    }

    pageDiv.html(pageDivData);

}

pagination(length);

Answer 1

在这里，您要一次显示 5 页。因此，对于 5 页，您将值存储在名为stepSize的变量中，因此您只需将其保持为 5。您在每一步中增加 stepSize 的值，您不应该增加它，只保留 5。我不明白你的第一个 for 循环的目的。stepCount 做什么，为什么需要。因此，可以使用以下代码简单地编辑您的代码：var length = response.length;&nbsp; &nbsp; console.log(length);&nbsp; &nbsp; function pagination(length){&nbsp; &nbsp; &nbsp; &nbsp; var size = Math.ceil(length/10);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var pageDiv = $('.pagination');&nbsp; &nbsp; &nbsp; &nbsp; var pageDivData = "";&nbsp; &nbsp; &nbsp; &nbsp; pageDivData += "<a href='javascript:void(0)' id='firstPage' class='firstPage'>&laquo;</a>";&nbsp; &nbsp; &nbsp; &nbsp; var stepSize = 5;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(var i=id; i<=stepSize; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(id == i){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageDivData +="<a href='javascript:void(0)' class='pageNo active' id='"+i+"'>"+i+"</a>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageDivData +="<a href='javascript:void(0)' class='pageNo' id='"+i+"'>"+i+"</a>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; pageDivData += "<a href='javascript:void(0)'>...</a>";&nbsp; &nbsp; &nbsp; &nbsp; pageDivData += "<a href='javascript:void(0)' class='pageNo id='"+size+"'>"+(size)+"</a>";&nbsp; &nbsp; &nbsp; &nbsp; if(id!=size){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageDivData += "<a href='javascript:void(0)' id='lastPage'>&raquo;</a>";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; pageDiv.html(pageDivData);&nbsp; &nbsp; }pagination(length);

Answer 2

我对上面的代码做了一些改动。通过使用此代码，用户可以显示下 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) {&nbsp; &nbsp; const loadPage = (page) => {&nbsp; &nbsp; &nbsp; &nbsp; props.loadPage(page);&nbsp; &nbsp; };&nbsp; &nbsp; const totalEntries = props.paginationObj.totalEntries;&nbsp; &nbsp; const totalPage = props.paginationObj.totalPage;&nbsp; &nbsp; const currentPage = props.paginationObj.currentPage;&nbsp; &nbsp; const nextPage = props.paginationObj.nextPage;&nbsp; &nbsp; const perPage = GlobalConfig.perPage;&nbsp; &nbsp; const start = (props.paginationObj.skipEntries + 1);&nbsp; &nbsp; const end = ((props.paginationObj.skipEntries + perPage) < totalEntries) ? (props.paginationObj.skipEntries + perPage) : totalEntries;&nbsp; &nbsp; const PagesLink = () => {&nbsp; &nbsp; &nbsp; &nbsp; let pages = [];&nbsp; &nbsp; &nbsp; &nbsp; // first & next page links&nbsp; &nbsp; &nbsp; &nbsp; pages.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={'first'} onClick={(e) => loadPage(1)} className={(currentPage === 1) ? 'paginate_button page-item previous disabled' : 'paginate_button page-item previous'}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to="#" aria-controls="listingTable" data-dt-idx="0" className="page-link">&lt;&lt; First</Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; pages.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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'}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to="#" aria-controls="listingTable" data-dt-idx="0" className="page-link">&lt; Previous</Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; // display previous pages links&nbsp; &nbsp; &nbsp; &nbsp; let previousLinks = currentPage - 4;&nbsp; &nbsp; &nbsp; &nbsp; for (let i = previousLinks; i <= currentPage; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i < currentPage && i > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pages.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={i} onClick={(e) => loadPage(i)} className={(currentPage === i) ? 'paginate_button page-item active' : 'paginate_button page-item'}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to="#" aria-controls="listingTable" data-dt-idx="1" className="page-link">{i}</Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // display next pages links&nbsp; &nbsp; &nbsp; &nbsp; let nextLinks = (currentPage < totalPage) ? (currentPage + 4) : currentPage;&nbsp; &nbsp; &nbsp; &nbsp; for (let i = currentPage; i <= nextLinks; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i <= totalPage) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pages.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={i} onClick={(e) => loadPage(i)} className={(currentPage === i) ? 'paginate_button page-item active' : 'paginate_button page-item'}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to="#" aria-controls="listingTable" data-dt-idx="1" className="page-link">{i}</Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // next & last page links&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; pages.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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'}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to="#" aria-controls="listingTable" data-dt-idx="2" className="page-link">Next &gt;</Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; pages.push(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li key={'last'} onClick={(e) => loadPage(totalPage)} className={(nextPage) ? 'paginate_button page-item next' : 'paginate_button page-item next disabled'}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link to="#" aria-controls="listingTable" data-dt-idx="2" className="page-link">Last &gt;&gt;</Link>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; return pages;&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {totalEntries > 0 &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="pagenation-foot d-flex align-items-center justify-content-between">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="totlecountpage"> <span id="displayed-record">Showing {start}-{end}</span> of {totalEntries} entries</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="countingpaging">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="dataTables_paginate paging_simple_numbers" id="listingTable_paginate">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul className="pagination">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <PagesLink />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </>&nbsp; &nbsp; )}export default Pagenation;

Answer 3

解决方案是根据要求进行许多 ajax 调用。解决方案来自不同的部分