CodeIgniter框架下使用日期选择器筛选MySQL条目的实现问题

现有代码可优化点 #

你当前的代码调整后即可实现和下拉筛选一致的日期筛选效果，核心问题如下：

1. 模型类语法错误：select(*)、from(crm_listings)写法缺少字符串引号，会触发语法报错
2. 日期查询条件写法不规范：原有拼接SQL的方式存在SQL注入风险，参数传递逻辑有误
3. 接口拆分不合理：当前状态筛选和日期筛选走两个独立接口，无法支持同时按两个条件筛选

修复步骤 #

第一步：修改模型类代码 #

修正语法错误，优化日期查询逻辑，可直接合并成一个查询方法支持多条件筛选：

// 合并后的多条件查询方法，可同时支持状态、日期筛选
function fetch_filtered($status = '', $startDate = '', $endDate = ''){
    $this->db->select('*');
    $this->db->from('crm_listings');
    // 状态筛选
    if($status != ''){
        $this->db->where('status',$status);
    }
    // 日期筛选
    if($startDate != '' && $endDate != ''){
        $this->db->where('added_date >=', $startDate);
        $this->db->where('added_date <=', $endDate);
    }
    $this->db->order_by('id','DESC');
    return $this->db->get();
}

第二步：修改控制器代码 #

合并两个查询接口为一个，避免重复代码：

class Testcontroller extends CI_Controller
{  
    public function index() 
    { 
        $this->load->view('crm/test');      
    }

    function fetch_filtered_data(){
        $output ='';
        $status = $this->input->post('status') ?? '';
        $startDate = $this->input->post('startDate') ?? '';
        $endDate = $this->input->post('endDate') ?? '';
        
        $this->load->model('crm/user_model');
        $data = $this->user_model->fetch_filtered($status, $startDate, $endDate);
        
        $output .= '
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <tr>
                    <th>Customer id</th>
                    <th>Title</th>
                    <th>Added Date</th>
                    <th>Status</th>
                </tr>
        ';
        if($data->num_rows() > 0)
        {
            foreach($data->result() as $row)
            {
                $output .= '
                <tr>
                    <td>'.$row->id.'</td>
                    <td>'.$row->title.'</td>
                    <td>'.$row->added_date.'</td>
                    <td>'.$row->status.'</td>
                </tr>
                ';
            }
        }
        else
        {
            $output .= '<tr>
                <td colspan="4">No Data Found</td>
                </tr>';
        }
        $output .= '</table>';
        echo $output;
    }
}

第三步：修改视图JS代码 #

统一走同一个接口，切换状态或者点击查询按钮时都传递所有筛选参数：

$(document).ready(function(){
    // 页面初始化加载全量数据
    load_data();

    // 点击查询按钮触发筛选
    $('#alertbox').click(function(){
        load_data();
    })

    // 切换状态下拉触发筛选
    $('#status').change(function(){ 
        load_data();
    })

    // 统一的加载数据方法
    function load_data(){
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        var status = $('#status').val();

        // 只选了单个日期时提示
        if((startDate != '' && endDate == '') || (startDate == '' && endDate != '')){
            alert("请选择完整的起止日期");
            return;
        }
        
        $.ajax({
            url:"<?php echo base_url(); ?>testcontroller/fetch_filtered_data",
            method:"POST",
            data:{startDate:startDate, endDate:endDate, status:status},
            success:function(data){
                $('#result').html(data)
            }
        })
    }
})

调整后选择起止日期点击查询按钮即可得到对应时间段的筛选结果，也支持同时选择状态和日期进行组合筛选，效果和原有状态筛选逻辑一致。

内容的提问来源于stack exchange，提问作者user17071484