限制分页中的链接数量答案

【问题标题】：Limit amount of links in pagination限制分页中的链接数量
【发布时间】：2021-11-02 08:33:46
【问题描述】：

我需要您的帮助我已经尝试了很多次但无法成功。我需要的是。我希望这个分页“https://prnt.sc/1r782v0”像“https://prnt.sc/1r79o89”我正在使用下面的代码进行分页

<?php
                if(!empty($total_pages)){
                    for($i=1; $i<=$total_pages; $i++){
                            if($i == 1){
                                ?>
                            <li class="page-item active" id="<?php echo $i;?>"><a href="JavaScript:Void(0);" data-cat-id="3" data-id="<?php echo $i;?>" class="page-link" ><?php echo $i;?></a></li>
                            <?php
                                }else{
                            ?>
                            <li class="page-item" id="<?php echo $i;?>"><a href="JavaScript:Void(0);" class="page-link" data-cat-id="3" data-id="<?php echo $i;?>"><?php echo $i;?></a></li>
                            <?php
                            }
                    }
                }
                ?>

因为我在其中犯了一个小错误，所以我不得不解决这个问题。请指导我，我会非常感谢你。

我为此使用 ajax 分页。如果您需要一个分页 jQuery，请在下面找到它。

<script>
$(document).ready(function() {
    $("#target-content").load("include/pagination.php?page=1&catpage=3");
    $(".page-link").click(function(){
        var id = $(this).attr("data-id");
        var catid = $(this).attr("data-cat-id");
        
        var select_id = $(this).parent().attr("id");
        $.ajax({
            url: "include/pagination.php",
            type: "GET",
            data: {
                page : id,
                catpage : catid,
            },
            cache: false,
            success: function(dataResult){
                $("#target-content").html(dataResult);
                $('html, body').animate({
                    scrollTop: $("#target-content").offset().top
                }, 2000);
                $(".page-item").removeClass("active");
                $("#"+select_id).addClass("active");
            }
        });
    });
});

【问题讨论】：

标签： php jquery pagination

【解决方案1】：

我分享的代码将输出类似于您显示的页面。

创建一个元素

<ul id="pgnUL" class="pagination"></ul>

然后使用下面的javascript进行分页

    /*
    pno                 = current page, starting from 0
    recordSize  = total number of records
    pageSize        = number of records to be displayed per page
    */
    
    $('#pgnUL').empty();
    
    if(pno == 0)
        $("#pgnUL").append('<li class="disabled"><a href="#">&laquo;</a></li>');
    else
        $("#pgnUL").append('<li><a href="javaScript:gotoPage(0)">&laquo;</a></li>');
    
    var pCnt    = Math.ceil(recordSize/pageSize);
    
    if(pCnt <= 5) {
        
        for(var i = 0 ; i < pCnt; i++){
            if(i == pno)
                $("#pgnUL").append('<li class="active"><a href="#">'+(i+1)+'</a></li>');
            else
                $("#pgnUL").append('<li><a href="javaScript:gotoPage(' + i + ')">'+(i+1)+'</a></li>');
        }
        
    } else {
    
        var start   = pno - 1;
        if(start < 0) start = 0;
        var end     = start + 5;
        if(end > pCnt) {
            end = pCnt;
            start = end - 5;
        }
    
        for(var i = start ; i < end; i++){
            if(i == pno)
                $("#pgnUL").append('<li class="active"><a href="#">'+(i+1)+'</a></li>');
            else
                $("#pgnUL").append('<li><a href="javaScript:gotoPage(' + i + ')">'+(i+1)+'</a></li>');
        }
        $("#pgnUL").append('<li class="disabled"><a href="#">...</a></li>');
        
    }
    
    if(pno == pCnt - 1)
        $("#pgnUL").append('<li class="disabled"><a href="#">&raquo;</a></li>');
    else
        $("#pgnUL").append('<li><a href="javaScript:gotoPage(' + (pCnt - 1) + ')">&raquo;</a></li>');
        
    
    function gotoPage(n) {
        /* define your next page data fetch logic here */
    }

【讨论】：