基于 CodeIgniter 和 AJAX 实现动态下拉菜单筛选表格数据（下拉.筛选.表格.菜单.动态...）

wufei123 发布于 2025-09-02 阅读（6）

基于 CodeIgniter 和 AJAX 实现动态下拉菜单筛选表格数据

本教程详细介绍了如何在 CodeIgniter 框架中，利用 jQuery 和 AJAX 技术实现表格数据的实时过滤功能。通过监听下拉菜单的change事件，前端异步请求后端接口，后端根据筛选条件从数据库获取数据并返回 JSON，最终前端动态更新表格内容，无需页面刷新，从而提升用户体验。1. 概述与核心原理

在传统的 web 应用中，当用户需要根据某个条件筛选数据时，通常会通过提交表单来刷新整个页面。然而，这种方式会导致用户体验不佳。通过引入 ajax（asynchronous javascript and xml）技术，我们可以在不刷新页面的情况下，与服务器进行数据交互，实现数据的实时更新。

本教程将结合 CodeIgniter 的 MVC 架构和 jQuery 库，实现以下流程：

  1. 前端 (View)：用户在下拉菜单中选择一个选项。
  2. JavaScript (jQuery)：捕获下拉菜单的change事件，获取选中的值，并构建一个 AJAX 请求发送给后端。
  3. 后端路由 (Routes)：将 AJAX 请求的 URL 映射到 CodeIgniter 控制器的一个特定方法。
  4. 后端控制器 (Controller)：接收前端发送的筛选参数，调用模型层方法查询数据库。
  5. 后端模型 (Model)：根据筛选参数执行数据库查询，并返回过滤后的数据。
  6. 后端控制器 (Controller)：将查询结果封装成 JSON 格式，发送回前端。
  7. 前端 (JavaScript)：接收到 JSON 数据后，解析数据并动态更新页面上的表格内容。
2. 前端视图 (View) 设计

首先，我们需要在视图文件中准备好表格结构和下拉菜单。为了方便 JavaScript 操作，请为下拉菜单和表格的 zuojiankuohaophpcntbody> 元素添加唯一的 id 属性。同时，引入 jQuery 库。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态数据筛选</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        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;
        }
    </style>
</head>
<body>

    <h1>数据实时筛选示例</h1>

    <!-- 筛选下拉菜单 -->
    <div class="filter-controls">
        <label for="sourceFilter">按来源筛选:</label>
        <select id="sourceFilter">
            <option value="">所有来源</option>
            <?php if (isset($sources) && $sources): ?>
                <?php foreach ($sources as $source): ?>
                    <option value="<?php echo htmlspecialchars($source['title']); ?>">
                        <?php echo htmlspecialchars($source['title']); ?>
                    </option>
                <?php endforeach; ?>
            <?php endif; ?>
        </select>
        <!-- 如果有多个筛选条件，可以添加更多下拉菜单，并赋予不同的ID -->
        <!-- <label for="categoryFilter">按分类筛选:</label>
        <select id="categoryFilter">
            <option value="">所有分类</option>
            ...
        </select> -->
    </div>

    <!-- 数据表格 -->
    <table id="recordsTable">
        <thead>
            <tr>
                <th width="10%">来源</th>
                <!-- 根据实际数据添加更多表头 -->
                <!-- <th>其他字段</th> -->
            </tr>
        </thead>
        <tbody id="recordsTableBody">
            <?php
            // 初始加载的数据
            if (isset($records) && count($records) > 0) {
                foreach ($records as $row) {
            ?>
                <tr>
                    <td><?= htmlspecialchars($row->source); ?></td>
                    <!-- <td><?= htmlspecialchars($row->other_field); ?></td> -->
                </tr>
            <?php
                }
            } else {
                echo '<tr><td colspan="1">暂无数据</td></tr>'; // 初始无数据时的提示
            }
            ?>
        </tbody>
    </table>

    <!-- JavaScript 逻辑 -->
    <script>
        $(document).ready(function() {
            // 监听下拉菜单的 change 事件
            $('#sourceFilter').on('change', function() {
                var selectedSource = $(this).val(); // 获取当前选中的值

                // 如果有多个筛选条件，可以这样收集所有值
                // var filters = {
                //     source: $('#sourceFilter').val(),
                //     category: $('#categoryFilter').val() // 假设有另一个ID为 categoryFilter 的下拉菜单
                // };

                // 发送 AJAX 请求
                $.ajax({
                    url: '<?php echo base_url('ajax_dropdown'); ?>', // CodeIgniter 的 base_url 辅助函数
                    type: 'GET',
                    data: {
                        source: selectedSource // 将筛选值作为 GET 参数发送
                        // 如果有多个筛选条件，可以发送 filters 对象
                        // data: filters
                    },
                    dataType: 'json', // 期望服务器返回 JSON 格式的数据
                    beforeSend: function() {
                        // 请求发送前显示加载提示
                        $('#recordsTableBody').html('<tr><td colspan="1">加载中...</td></tr>');
                    },
                    success: function(response) {
                        // AJAX 请求成功后处理数据
                        var records = response;
                        var html = '';

                        if (records && records.length > 0) {
                            // 遍历数据并构建表格行
                            $.each(records, function(index, record) {
                                html += '<tr>';
                                html += '<td>' + htmlspecialchars(record.source) + '</td>';
                                // 根据实际数据添加更多列
                                // html += '<td>' + htmlspecialchars(record.other_field) + '</td>';
                                html += '</tr>';
                            });
                        } else {
                            html = '<tr><td colspan="1">暂无数据</td></tr>';
                        }
                        // 更新表格的 tbody 内容
                        $('#recordsTableBody').html(html);
                    },
                    error: function(xhr, status, error) {
                        // AJAX 请求失败时处理错误
                        console.error("AJAX Error: ", status, error);
                        $('#recordsTableBody').html('<tr><td colspan="1">数据加载失败，请重试。</td></tr>');
                    }
                });
            });

            // JavaScript 辅助函数，用于 HTML 转义，防止 XSS
            function htmlspecialchars(str) {
                if (typeof str !== 'string') {
                    return str; // 如果不是字符串，直接返回
                }
                var map = {
                    "&": "&",
                    "<": "<",
                    ">": ">",
                    "\"": """,
                    "'": "&#039;"
                };
                return str.replace(/[&<>"']/g, function(m) { return map[m]; });
            }
        });
    </script>

</body>
</html>

关键点：

  • 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 映射到控制器的方法。

<?php
defined('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 数据。

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Your_controller extends CI_Controller {

    public function __construct() {
        parent::__construct();
        // 载入模型，用于数据库操作
        $this->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），用于封装所有的数据库操作。

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Your_model extends CI_Model {

    public function __construct() {
        parent::__construct();
        $this->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 实现动态下拉菜单筛选表格数据的详细内容，更多请关注知识资源分享宝库其它相关文章！

标签:  下拉 筛选 表格 

相关阅读

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最近发表

标签列表