CodeIgniter框架下结合AJAX实现表格列点击升序/降序排序

1. 后端模型查询逻辑修改 #

将原有写死的排序规则改为动态接收参数，同时增加白名单校验避免SQL注入风险：

// 对应模型方法，接收排序字段和排序方式两个参数
public function get_agent_count($sort = 'agent', $order = 'ASC') {
    // 白名单校验，只允许指定的排序字段和排序方式
    $allowed_sort = ['agent', 'cnt'];
    $allowed_order = ['ASC', 'DESC'];
    $sort = in_array($sort, $allowed_sort) ? $sort : 'agent';
    $order = in_array(strtoupper($order), $allowed_order) ? strtoupper($order) : 'ASC';

    // 根据排序字段动态拼接ORDER BY语句
    if ($sort == 'agent') {
        // 按代理名称排序时保留原有NULL值排最前的逻辑
        $order_sql = "ORDER BY c.display_name IS NULL, c.display_name $order";
    } else {
        // 按统计数量排序时直接按数值排序
        $order_sql = "ORDER BY cnt $order";
    }

    $sql = "SELECT count(*) AS cnt, COALESCE(c.display_name, '未分配代理') as name
            FROM table1 t LEFT JOIN user_table c ON t.agent_id = c.id 
            GROUP BY COALESCE(t.agent_id, 0), c.display_name 
            $order_sql";
    $query = $this->db->query($sql);
    return $query->result();
}

2. 后端控制器新增AJAX接口 #

新增接口用于接收前端排序参数，返回对应排序结果：

// 对应控制器新增方法
public function ajax_get_agent_stat() {
    $sort = $this->input->get('sort', true);
    $order = $this->input->get('order', true);
    $data = $this->你的模型名称->get_agent_count($sort, $order);
    echo json_encode($data);
}

3. 前端页面改造 #

表格结构修改 #

给表头增加排序标识属性，给表格tbody增加ID方便后续渲染：

<thead>
  <tr>
    <th><div class="sort-header" data-sort="agent">Agent</div></th>
    <th><div class="sort-header" data-sort="cnt">Count</div></th>
  </tr>
</thead>
<tbody id="agent-table-body">
<?php
if(isset($agent_count) && count($agent_count) > 0) {
  foreach($agent_count as $row ){                             
?>
    <tr>
          <td><?= $row->name ?></td>
          <td><?= $row->cnt ?></td>
    </tr>
<?php }  } ?>
</tbody>

排序交互JS逻辑 #

以下以jQuery为例实现点击切换排序逻辑，原生JS实现原理一致：

// 全局变量存储当前排序状态
let currentSort = 'agent';
let currentOrder = 'ASC';

// 绑定表头点击事件
$('.sort-header').click(function() {
  const targetSort = $(this).data('sort');
  // 点击当前排序字段时切换升降序，点击新字段时默认升序
  if (targetSort === currentSort) {
    currentOrder = currentOrder === 'ASC' ? 'DESC' : 'ASC';
  } else {
    currentSort = targetSort;
    currentOrder = 'ASC';
  }

  // 发送AJAX请求获取新排序数据
  $.get('/你的控制器名称/ajax_get_agent_stat', {
    sort: currentSort,
    order: currentOrder
  }, function(res) {
    const data = JSON.parse(res);
    let htmlStr = '';
    // 重新渲染表格内容
    data.forEach(row => {
      htmlStr += `<tr>
        <td>${row.name}</td>
        <td>${row.cnt}</td>
      </tr>`;
    });
    $('#agent-table-body').html(htmlStr);
  });
});

注意事项 #

• 替换代码中你的模型名称、你的控制器名称为实际项目中对应的名称
• 若项目未引入jQuery，可使用fetch或者XMLHttpRequest实现AJAX请求，逻辑完全一致
• 白名单校验是必须步骤，不可省略，避免出现SQL注入风险

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