Javascript 基于从属下拉列表的结果分页

我正在寻找一个只与依赖下拉列表相关联的分页教程。换句话说，如果我从一个独立的下拉列表中选择一个项目，{海狸，幼崽，童子军，冒险者，流浪者和领导者}。它将显示相关的记录，我可以用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>

功能加载\u数据（节ID）
{
$.ajax({
类型：“POST”，
url:“AdminPanelBackEnd.php”，
数据：“SectionID=”+SectionID，
成功：功能（数据）{
$（“#详情”）.html（数据）；
}
});
}
选择部分
正如您所说，您已经完成了ajax，因此查询字符串应该包含在分页导航中。
下一页的链接应类似于
？page=2&category=some\u id
ajax调用将替换整个内容和导航

每个框架上都有支持这一点的库。
我已经粘贴了代码，我想我需要重做ajax？这里调整的代码加上一些有用库的链接是受欢迎的。
<?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>