Fetching data values according to multiple dropdown filtering-CodePudding

Currently, I have a table in my view class that is populated with data from the backend using the MVC framework in Codeigniter. Now I have a dropdown above each column that is filling in the same records from my database. So I a filter that filters my records as soon as the person clicks the item in the dropdown list.

To achieve this I'm using a Jquery to get the selected item and sending that value to my controller. Code:

So far I have this in my view class:

<table>
 <tr>
  <th width="10%">Source</th>
 </tr>
 <tr>
  <td width="5%"><select id="your_id_name">
                  <option value="">All </option>
                  <?php if($sources) foreach($sources as $source): ?>
                  <option value="<?php echo $source['title'] ?>"><?php echo $source['title'] ?></option>
                  <?php endforeach;?>
                </select></td>
                <td width="10%"><select id="contact_type">
                  <option value="">All </option>
                  <?php if($types) foreach($types as $type): ?>
                  <option value="<?php echo $type['id'] ?>"><?php echo $type['title'] ?></option>
                  <?php endforeach;?>
                </select></td>
 </tr>
<tbody>
          <?php
              if(isset($records) && count($records) > 0)
                {
                  foreach($records as $row ){                            
                ?>
            <tr>            
              <td><?= $row->source ?></td>
              <td><?= $row->title ?></td>
            </tr>
            <?php }  }  ?>
          </tbody>

<script type="application/javascript">
  $('#your_id_name').on('change', function() {
    console.log($('#your_id_name').val());
        $.get('<?php echo base_url('ajax_dropdown'); ?>', {
          selected: $('#your_id_name').val()
        }, function(res) {
            var values = JSON.parse(res); // then do something
            var status = values.status;
            var records = values.records;
             var html = ""
             records.forEach(function(row){
               html  = `<tr><td>${row.source}</td>
              <td>${row.title }</td></tr>
              `; 
              console.log(tbody_tag)
             })
             var tbody_tag = $('tbody#table_body'); 
             tbody_tag.html(html);
        })
    })

    $('#contact_type').on('change', function() {
    console.log($('#contact_type').val());
        $.get('<?php echo base_url('ajax_dropdown'); ?>', {
          selected_contact: $('#contact_type').val()
        }, function(res) {
            var values = JSON.parse(res); // then do something
            var status = values.status;
            var records = values.records;
             var html = ""
             records.forEach(function(row){
               html  = `<tr><td>${row.source}</td>
              <td>${row.title}</td></tr>
              `; 
             })
             var tbody_tag = $('tbody#table_body'); 
             tbody_tag.html(html);
        })
    })

controller class:

public function ajax_lists(){
         $data = array(); // store data in here, store all data you need in data 
         $selected_input = $this->input->get('selected');
         $selected_input2 = $this->input->get('selected_contact');
        $data['records'] =$this->contacts_model->get_records($selected_input,$selected_input2);
        echo json_encode($data);
    }

Model Class:

function get_records($selected_input = null,$selected_input2 =null){
        $this->db->select("*");
        $this->db->from("crm_contacts as con");
        if($selected_input){
            $this->db->where("con.added_by",$selected_input);
        }
        if($selected_input2){
            $this->db->where("con.contact_type",$selected_input2);
        }
        $query = $this->db->get();
        return $query->result();
    }

Here as of now, I can filter all my records 1 at a time. So suppose I filter the table by source and then inside that source I want to filter the leftover data by contact_type, I cannot do it since doing so resets the 1st filter I had and filters all the data according to the new select item I have clicked.

Basically, I want to be able to filter already filtered data and change it according to my needs. I've tried entering 2 of the same vals in one of my onchange functions like this:

$('#your_id_name').on('change', function() {
    console.log($('#your_id_name').val());
        $.get('<?php echo base_url('ajax_dropdown'); ?>', {
          selected: $('#your_id_name').val(),
          selected_contact: $('#contact_type').val()

But this still didn't work out.

CodePudding user response：

at first, fix your url in jquery from:

'<?php echo base_url('ajax_dropdown'); ?>'

to:

'<?php echo base_url("ajax_dropdown"); ?>'

tbody_tag.html(html);

html won't work here. use append function

 $('tbody').append(html);

there is no need to make a key ["records"] of $data in controller use this:

$data['records'] =$this->contacts_model->get_records($selected_input,$selected_input2);

and check by console.log(res); either you are getting response or not...