POST方法获取医生搜索结果后，如何在页面实现列表A-Z排序？

下面提供两种可直接使用的实现方案，你可以根据实际场景选择：

方案1：后端PHP排序（数据量大时推荐，排序逻辑更稳定） #

步骤1：开启SESSION支持 #

在页面PHP代码最顶部添加一行代码，开启SESSION用于缓存搜索结果：

<?php
session_start();
include 'models/doctors.class.php';
// 原有代码保持不变

步骤2：缓存原始搜索结果 #

在你获取到搜索结果$s的位置，添加代码将结果存入SESSION：

if(isset($_POST['submit'])){
    $s= $search->filterDoctors($_POST);
    // 新增两行缓存代码
    $_SESSION['doctor_search_result'] = $s;
    $_SESSION['doctor_search_params'] = $_POST;
}
// 新增排序参数判断逻辑
elseif(isset($_SESSION['doctor_search_result'])){
    $s = $_SESSION['doctor_search_result'];
}

// 新增A-Z排序逻辑
if(isset($_GET['sort']) && $_GET['sort'] == 'az'){
    usort($s, function($a, $b){
        // 按医生姓名字段升序排序
        return strcmp($a['full_name'], $b['full_name']);
    });
}

步骤3：修改排序按钮 #

把原页面的排序按钮修改为带参数的跳转链接：

<a href="?sort=az" class="btn btn-primary">Filter-A-Z</a>

方案2：前端JS排序（无刷新，用户体验更好，适合数据量较小的场景） #

不需要修改PHP后端逻辑，直接改前端代码即可：

步骤1：给容器和卡片加标识 #

找到包裹所有医生卡片的容器，添加id：

<div class="container" id="doctorListContainer">

给每个医生卡片添加存储姓名的自定义属性：

<div class="therapistCardOne mx-2 popins-font my-2" data-name="<?php echo $row1['full_name'];?>">

步骤2：修改排序按钮 #

给排序按钮加点击事件标识：

<a href="javascript:;" class="btn btn-primary" id="sortAzBtn">Filter-A-Z</a>

步骤3：添加排序JS代码 #

在页面</body>标签之前添加如下JS代码：

<script>
$('#sortAzBtn').click(function(){
    // 获取所有医生卡片节点
    let doctorCards = $('#doctorListContainer > a').get();
    // 按姓名拼音/英文A-Z排序
    doctorCards.sort(function(cardA, cardB){
        let nameA = $(cardA).find('.therapistCardOne').data('name').toUpperCase();
        let nameB = $(cardB).find('.therapistCardOne').data('name').toUpperCase();
        return nameA.localeCompare(nameB);
    });
    // 把排序后的卡片重新插入页面
    $('#doctorListContainer').append(doctorCards);
});
</script>

内容的提问来源于stack exchange，提问作者user15601265