基于依赖下拉列表结果的分页

Question

我正在寻找仅与相关下拉列表相关联的分页教程。换句话说，如果我从包含项目的相关下拉列表中进行选择，{Beavers、Cubs、Scouts、Venturers、Rovers 和 Leaders}。它将显示相关的记录，我可以用 ajax 做到这一点。但是，其中一些项目有超过 100 条记录，我想根据选择的内容添加分页，只能找到基于记录总数的下拉列表的教程，例如 {50, 100, 250, 500 , 5000 等}

我一直在搜索， 基于依赖下拉列表的结果进行分页， 带分页的依赖下拉列表， 带有下拉列表等的动态分页

使用 PHP、MySQL、js 和 ajax 没有成功。我对此很陌生，教程将帮助我更好地理解，谁能告诉我要寻找什么？谢谢

AdminPanelFrontEnd.php 的代码

    <?php

        require_once('includes/header.php'); 
        require_once('includes/connection.php');

        if(isset($_SESSION['admin']))
        {
            $query = "SELECT * FROM members";
            $result = mysqli_query($con, $query);
        }
        else
        {
            header("location:AdminPanelFrontEnd.php");
        }

    ?>
    <script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script>
    function load_data(SectionID)
    {
        $.ajax({
            type: "POST",
            url: "AdminPanelBackEnd.php",
            data: 'SectionID=' + SectionID,
            success: function(data){
                $("#details").html(data);
            }
        });
    }
    </script>
    <div class="card-body">
    <table class="table table-striped bg-info text-white" id="details" >

    <tr>
        <a href="AddMemberFrontEnd.php" class="btn btn-lg btn-secondary mb-3 float-left">Add Member</a>  

        <div class="form-inline float-left ml-1">
            <select class="form-control mb-2" id="section" onChange="load_data(this.value);">
                <option value="null">Select Section</option>
                <?php
                    $query = "SELECT * FROM sections ";
                    $result = mysqli_query($con, $query);   
                    while($row=mysqli_fetch_assoc($result))
                       { 
                ?>
                <option value = "<?php echo $row["SectionID"]; ?>"> <?php echo $row["SectionName"]; ?> </option>
                <?php    
                       }
                ?>                   
            </select>
        </div> 
    </tr>

    <tr class="bg-info text-white">                           
        <td>Member Name</td>                    
        <td>Member Email</td>
        <td>Member Contact</td>
    </tr>

    </table>
</div>

AdminPanelBackEnd.php 的代码

<?php 

require_once('includes/connection.php');

$query = "SELECT * FROM sections, members WHERE 
sections.SectionID ='".$_POST["SectionID"]."' AND 
sections.SectionID = members.SectionID ORDER BY MemberName
";
$result = mysqli_query($con, $query);

?>
    <table class="text-center bg-info text-white">    
        <tr>                           
            <td>Member Name</td>                    
            <td>Member Email</td>
            <td>Member Contact</td>
        </tr> 
        <?php 
            while($row=mysqli_fetch_assoc($result))
            {
                $Member = $row['MemberName'];
                $MemberEmail= $row['Email'];  
                $MemberContact = $row['Contact'];                                                 
        ?>

        <tr class="bg-light text-dark">
            <td><?php echo $Member ?></td>
            <td><?php echo $MemberEmail ?></td>
            <td><?php echo $MemberContact ?></td>            
        </tr>
        <?php
            }
        ?>
    </table>

Answer 1

正如你所说，你已经做了ajax，所以查询字符串应该包含在分页导航中。 下一页的链接应类似于 ?page=2&category=some_id ajax 调用将替换整个内容和导航。

每个框架上都有支持该功能的库。