使用Ajax / PHP / JQuery的动态下拉列表，分页和搜索栏

Question

我正在尝试使用包含分页， dropdown列表和搜索栏的ajax生成动态页面。

搜索栏，分页和dropdown列表得到了很好的管理，可以根据需要进行自我调整。

现在，关于搜索栏，当我尝试搜索某项内容，并且有5个以上的结果时，例如，如果单击第2页，则不会显示下一个结果！

日志中未显示任何错误！

请问可以朝正确的方向吗？

<?php
require('config/config.php');

if(!isset($_SESSION))
{
    session_start();
}

if(isset($_SESSION['flash']))
{
    foreach($_SESSION['flash'] as $type => $message)
    {
        echo $message;
    }
    unset($_SESSION['flash']);
}

$nb_per_page = !empty($_POST['nb_per_page']) ? $_POST['nb_per_page'] : 5;
$search = !empty($_POST['search']) ? $_POST['search'] : "";
$p = !empty($_POST['page']) ? $_POST['page'] : 1;
$output = "";

$result = getList($nb_per_page, $search, $p, $cnx);

showList($result['list']);
pagination($result['nb_pages'], $p);

function getList($nb_per_page, $search, $p, $cnx)
{
    $nb_per_page = intval($nb_per_page);
    $start = intval(($p-1) * $nb_per_page);
    $where = "";
    if($search != "")
    {
        $where .= "WHERE lastName LIKE '%".$search."%' OR firstName LIKE '%".$search."%' OR age LIKE '%".$search."%' OR scheduleRange LIKE '%".$search."%' OR phoneNumber LIKE '%".$search."%' OR email LIKE '%".$search."%' OR candidacyType LIKE '%".$search."%'";
    }

    $query = $cnx->prepare("SELECT * FROM candidacies ".$where." LIMIT :start, :nb_per_page");
    $query->bindValue(':start', $start, PDO::PARAM_INT);
    $query->bindValue(':nb_per_page', $nb_per_page, PDO::PARAM_INT);
    $query->execute();

    $list = $query->fetchAll(PDO::FETCH_ASSOC);

    $query = $cnx->prepare('SELECT COUNT(id) AS totalResults FROM candidacies '.$where.' ');
    if($search != "")
    {
        $where .= "WHERE lastName LIKE '%".$search."%' OR firstName LIKE '%".$search."%' OR age LIKE '%".$search."%' OR scheduleRange LIKE '%".$search."%' OR phoneNumber LIKE '%".$search."%' OR email LIKE '%".$search."%' OR candidacyType LIKE '%".$search."%'";
    }
    $query->execute();

    $result = $query->fetch(PDO::FETCH_OBJ);
    $nb = $result->totalResults;

    $nb_pages = ceil($nb / $nb_per_page);
    if($nb_pages < 1)
    {
        $nb_pages = 1;
    }

    return array(
        "list" => $list,
        "nb" => $nb,
        "nb_pages" => $nb_pages
        );
}

function showList($list)
{
    $output = "";
    $output .= '
        <table class="table table-striped" id="candidaciesTable">
            <thead class="thead-light">
                <tr>
                    <th scope="col">lastName</th>
                    <th scope="col">firstName</th>
                    <th scope="col">Âge</th>
                    <th scope="col">Schedule Range</th>
                    <th scope="col">Phone Number</th>
                    <th scope="col">Email</th>
                    <th scope="col">Candidacy Type</th>
                    <th scope="col">Action</th>
                </tr>
            </thead>
            <tbody>
    ';

    foreach($list as $key => $value)
    {
        $output .= "
            <tr>
                <td>".htmlspecialchars($value["lastName"])."</td>
                <td>".htmlspecialchars($value["firstName"])."</td>
                <td>".htmlspecialchars($value["age"])."</td>
                <td>".htmlspecialchars($value["scheduleRange"])."</td>
                <td>".htmlspecialchars($value["phoneNumber"])."</td>
                <td>".htmlspecialchars($value["email"])."</td>
                <td>".htmlspecialchars($value["candidacyType"])."</td>
                <td>
                    <div class='btn-group'>
                        <button class='btn btn-light btnViewCandidacy' id=".$value['id'].">
                            <i class='far fa-eye'></i>
                        </button>
                        <button class='btn btn-info' id='btnEditCandidacy' onclick='editCandidacy(".$value['id'].")'>
                            <i class='far fa-edit'></i>
                        </button>
                        <button class='btn btn-danger' id='btnDeleteCandidacy' onclick='deleteCandidacy(".$value['id'].")'>
                            <i class='far fa-trash-alt'></i>
                        </button>
                    </div>
                </td>
            </tr>
        ";
    }

    $output .= "
        </tbody>
    </table>";

    echo $output;
}

function pagination($nb_pages, $page)
{
    $output = "";
    $output .= "<div class='pagination-centered'>";
    /*if($page > 1)
    {
        $output .= '<a class="paginationLink" id="'.$i.'">Prev</a>';
    }*/
    for($i = 1; $i <= $nb_pages; $i++)
    {
        $class = "";
        if($page == $i){
            $class = "active";
        }
        $output .=  '<a class="paginationLink '.$class.'" id="'.$i.'">'.$i.'</a>';
    }
    /*if($page > $nb_pages)
    {
        $output .= '<a class="paginationLink" id="'.$i.'">Next</a>';
    }*/
    $output .=  "</div>";

    echo $output;
}

$output .= '
        <div class="modal" tabindex="-1" role="dialog" id="candidacyModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Candidature</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="modal-body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>';

echo $output;
?>

 $(document).ready(function() { $('#searchContent').keyup(function() { var search = $(this).val(); var nb_per_page = $('.entriesData').val(); var page = 1; loadContent(nb_per_page, search, page); }); $('.entriesData').change(function () { var nb_per_page = $(this).val(); var search = $('#searchContent').val(); var page = 1; loadContent(nb_per_page, search, page); }); $('.paginationLink').on('click', function() { var page = $(this).attr('id'); var nb_per_page = $('.entriesData').val(); var search = $('#searchContent').val(); //loadPagination(page); loadContent(nb_per_page, search, page); }); $('.btnViewCandidacy').on('click', function () { var candidacyId = $(this).attr('id'); $.ajax({ url:"viewCandidacy.php", method:"get", data:{candidacy:candidacyId}, success:function(data) { $('#modal-body').html(data); $('#candidacyModal').modal("show"); } }); }); }); function loadContent(nb_per_page, search, page) { var p = {}; p['nb_per_page'] = nb_per_page; p['search'] = search; p['page'] = page; $.post("search.php", p, function(data) { $("#result").html(data); }); } 

 <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group"> <div class="input-group"> <button class="btn btn-outline-success my-2 my-sm-0">Search</button> <input type="text" name="searchContent" id="searchContent" placeholder="searchContent" class="form-control" /> </div> </div> <label>Display<select name="entriesData" class="entriesData"> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5" selected>5</option> <option value="10">10</option> <option value="20">20</option> <option value="50">50</option> <option value="100">100</option> </select> résults</label> <div id="result"> <?php include('search.php');?> </div> </body> 

Answer 1

请添加类似的jQuery引用

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>