如何在Codeigniter与Bootstrap中通过按钮实现酒店房间数据按数值排序

解决方案 #

方案1：PHP后端排序（推荐） #

直接在遍历输出数组前对$tamu数组按gateA的数值升序排序即可，避免前端排序的闪烁问题，性能更优。
你只需要在原有foreach代码前添加一段排序逻辑，修改后的代码片段如下：

<section class="content"> 
<h2>Gate A</h2>
<div class="card ml-1" style="width: 35rem">
 <div class="row ml-3 mt-3 mb-3">

  <?php
    // 新增排序逻辑：按gateA的整数值从小到大排序
    usort($tamu, function($a, $b) {
        return intval($a->gateA) - intval($b->gateA);
    });
    foreach ($tamu as $tamu_item) : 
  ?>

  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
     <button type="button" class="btn btn-success mb-1"><?php echo $tamu_item->gateA ?> 
     </button>
   </div>  
 </div>
   <?php endforeach;?> 
</div>
</div>
</section>

注意这里用intval()把字段值转成整数再比较，是为了避免字符串排序的异常问题：如果直接用字符串比较，会出现"2" > "21"的错误排序结果，转整数后就可以实现你要的2、21、35的升序效果，原有Bootstrap布局无需做任何调整。

方案2：前端JS排序（仅适合不能修改后端逻辑的场景） #

如果不方便修改PHP代码，可以在页面渲染完成后用JS对按钮按文本数值排序，代码如下：

document.addEventListener('DOMContentLoaded', function() {
  const btnContainer = document.querySelector('.content .row');
  const btnItems = Array.from(btnContainer.querySelectorAll('.btn-toolbar'));
  // 按按钮文本的数值升序排序
  btnItems.sort((a, b) => {
    return parseInt(a.textContent.trim()) - parseInt(b.textContent.trim());
  });
  // 重新插入到容器中完成排序
  btnItems.forEach(item => btnContainer.appendChild(item));
});

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