基于CodeIgniter和jQuery实现动态表格数据筛选教程

<!-- 引入 jQuery 库，通常放在 </body> 标签之前 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table>
    <thead>
        <tr>
            <th width="10%">
                Source
                <select id="sourceFilter">
                    <option value="">All</option>
                    <?php if (isset($sources) && $sources) : ?>
                        <?php foreach ($sources as $source) : ?>
                            <option value="<?php echo $source['title']; ?>"><?php echo $source['title']; ?></option>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </select>
            </th>
            <!-- 如果有其他列和筛选器，也类似添加 -->
        </tr>
    </thead>
    <tbody id="dataTableBody">
        <?php
        if (isset($records) && count($records) > 0) {
            foreach ($records as $row) {
        ?>
                <tr>
                    <td><?= $row->source; ?></td>
                    <!-- 其他列的数据 -->
                </tr>
        <?php
            }
        } else {
            echo '<tr><td colspan="1">No records found.</td></tr>';
        }
        ?>
    </tbody>
</table>

<script>
    $(document).ready(function() {
        // 监听 sourceFilter 下拉菜单的 change 事件
        $('#sourceFilter').on('change', function() {
            // 获取当前选中的值
            var selectedSource = $(this).val();
            // 如果有多个筛选器，可以在这里收集所有筛选器的值
            // var otherFilterValue = $('#otherFilterId').val();

            // 发送 AJAX GET 请求到后端
            $.get('<?php echo base_url('ajax_filter_records'); ?>', {
                source: selectedSource
                // 如果有多个筛选器，可以这样添加参数:
                // other_param: otherFilterValue
            }, function(response) {
                // 解析后端返回的 JSON 字符串
                var records = JSON.parse(response);
                var tableBody = $('#dataTableBody');
                tableBody.empty(); // 清空现有表格内容

                if (records.length > 0) {
                    // 遍历返回的数据，动态生成表格行
                    $.each(records, function(index, record) {
                        var row = '<tr><td>' + record.source + '</td></tr>';
                        // 如果有其他列，需要在这里拼接
                        tableBody.append(row);
                    });
                } else {
                    tableBody.append('<tr><td colspan="1">No records found.</td></tr>');
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                // 处理 AJAX 请求失败的情况
                console.error("AJAX request failed: " + textStatus, errorThrown);
                $('#dataTableBody').empty().append('<tr><td colspan="1">Error loading data.</td></tr>');
            });
        });
    });
</script>

// application/config/routes.php
$route['ajax_filter_records'] = 'DataController/filterRecords'; // 映射到 DataController 类的 filterRecords 方法

// application/controllers/DataController.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class DataController extends CI_Controller {

    public function __construct() {
        parent::__construct();
        // 加载模型，假设你有一个名为 Data_model 的模型
        $this->load->model('Data_model');
    }

    public function filterRecords() {
        // 确保请求是 AJAX 请求，提高安全性
        if (!$this->input->is_ajax_request()) {
            show_404(); // 或者返回错误信息
        }

        // 获取前端通过 GET 请求发送的筛选参数
        $source_filter = $this->input->get('source');
        // 如果有其他筛选参数，也类似获取
        // $other_filter = $this->input->get('other_param');

        // 调用模型方法获取过滤后的数据
        // 传入筛选条件，模型将根据这些条件查询数据库
        $filtered_records = $this->Data_model->getFilteredRecords($source_filter);

        // 设置响应头为 JSON 格式
        $this->output->set_content_type('application/json');
        // 将数据编码为 JSON 字符串并输出
        echo json_encode($filtered_records);
    }
}

// application/models/Data_model.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Data_model extends CI_Model {

    public function __construct() {
        parent::__construct();
        $this->load->database(); // 加载数据库库
    }

    /**
     * 根据筛选条件获取数据
     * @param string|null $source_filter 源筛选条件
     * @return array 过滤后的记录数组
     */
    public function getFilteredRecords($source_filter = null) {
        $this->db->select('*');
        $this->db->from('your_table_name'); // 替换为你的实际表名

        // 根据筛选条件构建 WHERE 子句
        if (!empty($source_filter)) {
            $this->db->where('source', $source_filter);
        }
        // 如果有其他筛选条件，可以类似添加
        // if (!empty($other_filter)) {
        //     $this->db->where('other_column', $other_filter);
        // }

        $query = $this->db->get();
        return $query->result_array(); // 返回结果为关联数组，便于 JSON 编码
    }
}

// 假设有多个筛选器：sourceFilter, categoryFilter
$('#sourceFilter, #categoryFilter').on('change', function() {
    var selectedSource = $('#sourceFilter').val();
    var selectedCategory = $('#categoryFilter').val();

    $.get('<?php echo base_url('ajax_filter_records'); ?>', {
        source: selectedSource,
        category: selectedCategory // 添加新的筛选参数
    }, function(response) {
        // ... 处理响应并更新表格 ...
    });
});

public function filterRecords() {
    // ...
    $source_filter = $this->input->get('source');
    $category_filter = $this->input->get('category'); // 获取新的筛选参数

    $filtered_records = $this->Data_model->getFilteredRecords($source_filter, $category_filter);
    // ...
}

public function getFilteredRecords($source_filter = null, $category_filter = null) {
    $this->db->select('*');
    $this->db->from('your_table_name');

    if (!empty($source_filter)) {
        $this->db->where('source', $source_filter);
    }
    if (!empty($category_filter)) {
        $this->db->where('category', $category_filter); // 添加新的 WHERE 条件
    }

    $query = $this->db->get();
    return $query->result_array();
}