jQuery AJAX+PHP实现表格排序时排序图标无法切换问题求助

现有代码核心问题 #

• HTML部分重复使用ASC、DESC作为元素id，id在单页面内必须唯一，导致选择器无法准确定位目标图标
• 未在每次点击后更新表头data-order的属性值，排序状态一直停留在初始的desc，导致只能单向排序
• jQuery的replace()方法使用错误，正确替换元素方法为replaceWith()，但此处不需要替换元素，只要切换两个图标的显隐状态即可
• 图标上自定义属性拼写错误，datas-order应为data-order
• 非a标签th上添加href属性属于无效写法
• AJAX请求成功后数据插入逻辑有误：删除了postsList的非首行内容，却把返回的新数据插入到了postsList2元素中，和原表格不匹配

修正后的代码 #

HTML部分 #

<table border='1' width='100%' style='border-collapse: collapse;' id='postsList'>
  <thead>
    <tr>
      <th>S.no</th>
      <th class="column_sort" id="name" data-order="desc">Title
        <img class="sort-icon asc-icon" data-order="desc" src="<?php echo base_url();?>/assets/img/UpArrow.png">
        <img class="sort-icon desc-icon" data-order="asc" src="<?php echo base_url();?>/assets/img/DownArrow.png" style="display:none;">
      </th>
      <th class="column_sort" id="symbol" data-order="desc">Symbol
        <img class="sort-icon asc-icon" data-order="desc" src="<?php echo base_url();?>/assets/img/UpArrow.png">
        <img class="sort-icon desc-icon" data-order="asc" src="<?php echo base_url();?>/assets/img/DownArrow.png" style="display:none;">
      </th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JS部分 #

$(document).ready(function(){  
  $(document).on('click', '.column_sort', function(){  
    let $currentTh = $(this);
    const column_name = $currentTh.attr("id");  
    const order = $currentTh.data("order");  
    const PageNumber = $("#pagination").find("strong").html();
    
    $.ajax({  
      url: '<?=base_url()?>/Main/fetch_details/', 
      method: "POST",  
      data: {column_name:column_name, order:order ,PageNumber:PageNumber},  
      success: function(data) {
        // 清空原表格内容并插入新数据
        $("#postsList tbody").html(data);
        // 切换当前列的排序图标显隐
        $currentTh.find('.sort-icon').toggle();
        // 更新排序状态，下次点击取相反值
        const newOrder = order === 'desc' ? 'asc' : 'desc';
        $currentTh.data('order', newOrder);
        $currentTh.attr('data-order', newOrder);
      }  
    }) 
  });  
});

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