CodeIgniter中基于jQuery和AJAX实现多下拉框联动筛选表格数据

本教程详细讲解如何在CodeIgniter MVC框架下，利用jQuery和AJAX实现表格数据的多条件联动筛选。通过前端收集所有筛选条件并发送至后端控制器，后端模型根据这些条件构建动态查询，最终将过滤后的数据返回给前端，实现实时、多维度的表格内容更新，解决单一筛选器重置其他筛选的问题。

1. 理解多条件筛选的挑战

在数据展示型应用中，用户经常需要根据多个维度（例如，数据来源、联系类型等）来筛选表格内容。常见的挑战是，当存在多个筛选下拉框时，如果每次只发送一个筛选条件到后端，那么每次选择都会重置其他筛选器，导致无法进行多维度的累积过滤。要实现“在已筛选数据上再次筛选”的功能，核心在于每次ajax请求时，必须将所有当前生效的筛选条件一并发送到后端。

2. 核心架构概述

我们将采用MVC（Model-View-Controller）模式，结合AJAX技术实现这一功能：

• 视图 (View): 负责展示表格和筛选下拉框。通过jQuery监听下拉框的 change 事件，收集所有筛选条件，并发起AJAX请求到后端。
• 控制器 (Controller): 接收前端发送的筛选参数，调用模型层获取数据，并将过滤后的结果以JSON格式返回给前端。
• 模型 (Model): 根据控制器传递的参数，动态构建数据库查询条件，从数据库中检索匹配的数据。

3. 视图层实现 (HTML & JavaScript)

视图层包含两部分：用于展示数据的HTML表格结构和处理筛选逻辑的JavaScript代码。

ShutterStock AI

Shutterstock推出的AI图片生成工具

501

查看详情

3.1 HTML 结构

为表格的 <tbody> 元素添加一个唯一的ID（例如 table_body），以便JavaScript能够准确地更新其内容。同时，确保每个筛选下拉框也有唯一的ID，且其 value 属性应设置为后端用于筛选的实际值。

<table>
<thead>
<tr>
<th width="10%">Source</th>
<th width="10%">Contact Type</th>