CodeIgniter MVC框架下基于下拉选项实现表格数据实时筛选咨询

步骤1：修改视图页面标签结构 #

首先给下拉框和表格主体加上可识别的属性，方便后续JS操作，同时把表格行的循环逻辑抽成独立公共片段，避免重复代码：

<table>
  <tr>
    <th width="10%">Source</th>
    <!-- 新增其他列的th同理 -->
  </tr>
  <tr>
    <td width="5%">
      <!-- 给下拉框加统一类名filter-select，name属性对应数据库筛选字段 -->
      <select class="filter-select" name="source">
        <option value="">All </option>
        <?php if($sources) foreach($sources as $source): ?>
        <option value="<?php echo $source['title'] ?>"><?php echo $source['title'] ?></option>
        <?php endforeach;?>
      </select>
    </td>
    <!-- 新增其他列的下拉框同理，只要加filter-select类、name设为对应字段即可 -->
  </tr>
  <tbody id="table-body">
    <!-- 把表格行循环逻辑抽成独立视图文件table_rows.php，首次加载和AJAX刷新共用 -->
    <?php $this->load->view('table_rows', ['records' => $records]) ?>
  </tbody>
</table>

新建application/views/table_rows.php文件，内容如下：

<?php
if(isset($records) && count($records) > 0) {
  foreach($records as $row ){                            
?>
<tr>            
  <td><?= $row->source ?></td>
  <!-- 其他列的td同理 -->
</tr>
<?php } } ?>

步骤2：新增JS实现实时筛选 #

在页面底部引入jQuery（项目已有可跳过引入步骤），监听下拉框的选择事件，自动收集所有筛选条件发起AJAX请求：

<script src="你的本地jQuery文件路径"></script>
<script>
$(function(){
  // 监听所有筛选下拉框的选择事件
  $('.filter-select').change(function(){
    // 收集所有下拉框的选中值作为筛选参数
    let filterParams = {};
    $('.filter-select').each(function(){
      let field = $(this).attr('name');
      let value = $(this).val();
      filterParams[field] = value;
    });
    // 拼接CodeIgniter CSRF令牌（开启CSRF防护时必须传，否则请求会被拦截）
    // CI3版本用下面这行
    filterParams['<?= $this->security->get_csrf_token_name() ?>'] = '<?= $this->security->get_csrf_hash() ?>';
    // CI4版本替换为下面这行
    // filterParams['<?= csrf_token() ?>'] = '<?= csrf_hash() ?>';

    // 发起AJAX请求到后端接口
    $.post('<?= site_url("你的控制器名/get_filtered_records") ?>', filterParams, function(res){
      // 用返回的新表格内容替换原有内容
      $('#table-body').html(res);
    });
  });
});
</script>

步骤3：后端新增筛选接口 #

在你的控制器中新增处理筛选请求的方法：

// CI3示例
public function get_filtered_records()
{
  // 接收所有前端传的筛选参数
  $filters = $this->input->post();
  // 移除CSRF参数，避免干扰查询条件
  unset($filters[$this->security->get_csrf_token_name()]);
  // 调用模型查询筛选后的记录
  $data['records'] = $this->你的模型名->get_filtered_records($filters);
  // 直接返回表格行的HTML片段
  $this->load->view('table_rows', $data);
}

// CI4示例
// public function get_filtered_records()
// {
//   $filters = $this->request->getPost();
//   unset($filters[csrf_token()]);
//   $data['records'] = $this->你的模型名->get_filtered_records($filters);
//   return view('table_rows', $data);
// }

步骤4：模型新增筛选查询方法 #

在对应的模型中新增多条件拼接查询逻辑：

public function get_filtered_records($filters = [])
{
  $this->db->from('你的业务表名');
  // 自动遍历所有非空筛选条件，拼接WHERE查询，多条件默认是AND关系，天然支持联合筛选
  foreach($filters as $field => $value){
    if($value !== ''){
      $this->db->where($field, $value);
    }
  }
  return $this->db->get()->result();
}

多下拉框适配说明 #

后续新增其他列的筛选下拉框时，只需要给对应下拉框加上filter-select类、name属性设为对应的数据库字段名即可，不需要修改JS、控制器、模型的逻辑，自动支持多条件联合筛选。

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