分页显示 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;

    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;

            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>";

                }

        }

        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 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) {

    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">&lt;&lt; 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">&lt; 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 &gt;</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 &gt;&gt;</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;

Answer 3

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