CodeIgniter3中Ajax获取数据后表格无法渲染问题求助

1. 修正前端循环的数据源 #

控制器返回的JSON结构是包含search属性的对象，而非直接的数组，你之前循环data.length不会执行（因为data是对象，length为undefined），需要遍历data.search数组：

success: function(data) {
    console.log(data);
    var html = '';
    // 遍历data.search数组，而非data本身
    for (var i = 0; i < data.search.length; i++) {
        html += '<tr>' +
            '<td>' + data.search[i].dttime + '</td>' +
            '<td>' + data.search[i].amount + '</td>' +
            '<td>' + data.search[i].description + '</td>' +
            '<td>' + data.search[i].frequency + '</td>' +
            '<td>' + data.search[i].Month_pay + '</td>' +
            '<td>' + data.search[i].Year_pay + '</td>' +
            '<td>' + data.search[i].dttime_pay + '</td>' +
            '</tr>';
    }
    $('#datos').html(html);
}

2. 修复模型中的SQL WHERE条件错误 #

CodeIgniter的where()方法会自动添加等于号，你手动加的额外等号会生成payment_reports.id_compania== 'xxx'这类无效SQL语句，同时增加空值判断，避免下拉框选空时无意义的筛选：

function search_report($id_compania, $id_activity, $month_) {
    $this->db->select("DATE_FORMAT(datetime, '%m/%d/%y') AS dttime, amount, description, frequency, Month_pay, Year_pay, DATE_FORMAT(datetime_pay, '%m/%d/%y') AS dttime_pay");
    $this->db->from('payment_reports');
    $this->db->join('compania', 'compania.id_compania = payment_reports.id_compania');
    $this->db->join('activities', 'activities.id_activity = payment_reports.id_activity');
    
    // 去掉WHERE条件中的多余等号，仅当参数非空时添加筛选
    if (!empty($id_compania)) {
        $this->db->where('payment_reports.id_compania', $id_compania);
    }
    if (!empty($id_activity)) {
        $this->db->where('activities.id_activity', $id_activity);
    }
    if (!empty($month_)) {
        $this->db->where('MONTH(datetime)', $month_);
    }
    
    $this->db->where('YEAR(datetime) = YEAR(NOW())');
    $query = $this->db->get();
    return $query->result();
}

3. 后端规范输出JSON响应 #

直接echo json_encode()可能混入多余输出（比如空格、调试信息），改用CodeIgniter的output类设置响应头并输出，确保JSON格式正确：

public function search_report() {
    // 禁用调试分析器，避免多余输出
    $this->output->enable_profiler(false);
    
    $id_compania = $this->input->post('id_compania');
    $id_activity = $this->input->post('id_activity');
    $month_ = $this->input->post('month_');
    $data['search'] = $this->admin->search_report($id_compania, $id_activity, $month_);
    
    // 设置JSON响应头并输出
    $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($data));
}

可选：前端添加空参数校验 #

避免用户未选任何条件就发起请求，可增加简单判断：

$('#searchData').click(function() {
    var id_compania = document.getElementById('id_compania').value;
    var id_activity = document.getElementById('id_activity').value;
    var month_ = document.getElementById('month_').value;
    
    // 至少选择一个筛选条件才发起请求
    if (!id_compania && !id_activity && !month_) {
        alert('请选择至少一个筛选条件');
        return;
    }
    
    // 后续AJAX代码不变
})

问题根源总结 #

1. 数据源匹配错误：前端循环对象而非对象内的数组，导致循环未执行，表格无内容。
2. SQL语法错误：WHERE条件的多余等号导致查询无结果。
3. 响应格式不规范：直接echo可能混入多余内容，干扰JSON解析。

内容的提问来源于stack exchange，提问作者A. Marisol Rodríguez