本教程详细介绍了如何在 CodeIgniter 框架中，利用 jQuery 和 AJAX 技术实现表格数据的实时过滤功能。通过监听下拉菜单的change事件，前端异步请求后端接口，后端根据筛选条件从数据库获取数据并返回 JSON，最终前端动态更新表格内容，无需页面刷新，从而提升用户体验。
1. 概述与核心原理
在传统的 web 应用中，当用户需要根据某个条件筛选数据时，通常会通过提交表单来刷新整个页面。然而，这种方式会导致用户体验不佳。通过引入 ajax（asynchronous javascript and xml）技术，我们可以在不刷新页面的情况下，与服务器进行数据交互，实现数据的实时更新。
本教程将结合 CodeIgniter 的 MVC 架构和 jQuery 库，实现以下流程：
前端 (View)：用户在下拉菜单中选择一个选项。JavaScript (jQuery)：捕获下拉菜单的change事件，获取选中的值，并构建一个 AJAX 请求发送给后端。后端路由 (Routes)：将 AJAX 请求的 URL 映射到 CodeIgniter 控制器的一个特定方法。后端控制器 (Controller)：接收前端发送的筛选参数，调用模型层方法查询数据库。后端模型 (Model)：根据筛选参数执行数据库查询，并返回过滤后的数据。后端控制器 (Controller)：将查询结果封装成 JSON 格式，发送回前端。前端 (JavaScript)：接收到 JSON 数据后，解析数据并动态更新页面上的表格内容。
2. 前端视图 (View) 设计
首先，我们需要在视图文件中准备好表格结构和下拉菜单。为了方便 JavaScript 操作，请为下拉菜单和表格的
元素添加唯一的 id 属性。同时，引入 jQuery 库。
动态数据筛选 table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } select { padding: 5px; margin-bottom: 10px; }数据实时筛选示例
所有来源 <option value=""> <!-- 所有分类 ... -->
| 来源 | <!--其他字段 | -->
|---|---|
| source); ?> | <!--other_field); ?> | -->
| 暂无数据 |
关键点：
id=”sourceFilter”：用于 jQuery 选中下拉菜单。id=”recordsTableBody”：用于 jQuery 动态更新表格内容。base_url(‘ajax_dropdown’)：确保 AJAX 请求的 URL 正确指向 CodeIgniter 的根路径。dataType: ‘json’：明确告知 jQuery 期望服务器返回 JSON 格式的数据。htmlspecialchars：在将数据插入 HTML 前进行转义，防止 XSS 攻击。多下拉菜单处理：如果存在多个筛选下拉菜单，可以在 data 对象中传递所有筛选器的值，并在后端同时处理。例如 data: { source: selectedSource, category: selectedCategory }。
3. 后端路由 (Routes) 配置
在 CodeIgniter 的 application/config/routes.php 文件中，添加一条路由规则，将前端 AJAX 请求的 URL 映射到控制器的方法。
<?phpdefined('BASEPATH') OR exit('No direct script access allowed');/*| -------------------------------------------------------------------------| URI ROUTING| -------------------------------------------------------------------------| This file lets you re-map URI requests to specific controller functions.|*/// ... 其他路由规则 ...// 为 AJAX 请求定义路由$route['ajax_dropdown'] = 'your_controller/ajax_dropdown';
说明：
ajax_dropdown 是前端 AJAX 请求的 URL 片段。your_controller/ajax_dropdown 指向 application/controllers/Your_controller.php 文件中的 ajax_dropdown 方法。请根据你的实际控制器名称进行替换。
4. 后端控制器 (Controller) 逻辑
创建一个控制器文件（例如 application/controllers/Your_controller.php），并在其中实现 ajax_dropdown 方法，用于接收前端请求、调用模型、并返回 JSON 数据。
load->model('your_model'); // 替换为你的模型名称 } // 默认方法，用于加载初始视图和数据 public function index() { // 假设这里获取初始的下拉菜单数据和表格数据 $data['sources'] = $this->your_model->get_all_sources(); $data['records'] = $this->your_model->get_all_records(); // 获取所有记录或默认记录 $this->load->view('your_view', $data); // 替换为你的视图文件 } // 处理 AJAX 请求的方法 public function ajax_dropdown() { // 确保请求是 AJAX 请求 (可选，但推荐) if (!$this->input->is_ajax_request()) { show_404(); // 如果不是 AJAX 请求，返回 404 } // 获取前端发送的筛选参数 // $this->input->get() 方法用于获取 GET 请求参数 // TRUE 参数用于开启 XSS 过滤，提高安全性 $source_filter = $this->input->get('source', TRUE); // 如果有多个筛选条件，可以这样获取 // $category_filter = $this->input->get('category', TRUE); // $filters = ['source' => $source_filter, 'category' => $category_filter]; // 调用模型方法，根据筛选条件获取数据 $filtered_data = $this->your_model->get_filtered_records($source_filter); // 将筛选参数传递给模型 // 设置响应头为 JSON 格式 $this->output ->set_content_type('application/json') ->set_output(json_encode($filtered_data)); // 将数据编码为 JSON 并输出 }}
关键点：
$this->load->model(‘your_model’)：载入你的数据模型，以便进行数据库操作。$this->input->get(‘source’, TRUE)：安全地获取名为 source 的 GET 参数。$this->output->set_content_type(‘application/json’)->set_output(json_encode($filtered_data))：这是 CodeIgniter 推荐的返回 JSON 数据的方式，它会自动设置正确的 HTTP Content-Type 头。
5. 后端模型 (Model) 逻辑
创建一个模型文件（例如 application/models/Your_model.php），用于封装所有的数据库操作。
load->database(); // 载入数据库库 } /** * 获取所有用于下拉菜单的来源数据 * @return array */ public function get_all_sources() { // 假设你的数据表中有一个 'title' 字段表示来源名称 $this->db->select('DISTINCT(title) as title'); $this->db->from('your_table_name'); // 替换为你的数据表名 $query = $this->db->get(); return $query->result_array(); // 返回数组，方便在视图中 foreach } /** * 获取所有记录 (用于初始加载) * @return array */ public function get_all_records() { $query = $this->db->get('your_table_name'); // 替换为你的数据表名 return $query->result(); // 返回对象数组 } /** * 根据筛选条件获取记录 * @param string|null $source_filter 来源筛选值 * @return array */ public function get_filtered_records($source_filter = null) { $this->db->select('source'); // 选择你需要展示的字段 // 如果有其他字段，可以添加：$this->db->select('
以上就是基于 CodeIgniter 和 AJAX 实现动态下拉菜单筛选表格数据的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1272229.html
微信扫一扫 
支付宝扫一扫 
