Jump to content

Filtering data values according to multiple dropdowns


KSI
 Share

Go to solution Solved by requinix,

Recommended Posts

Currently I have a table in my view class that is populated with data from the backend using MVC framework in codeigniter. Now I have a dropdown above each column that is filling in the same records from my database. So I want to be able to filter 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.

Link to comment
Share on other sites

  • Solution

Use one single onchange handler for all the dropdowns: put the filter inside a <thead> so you can use a simple selector to find them all (without any IDs). Then make that single handler retrieve and submit the values for all the dropdowns.

And for crying out loud, learn how to name things. "your_id_name"? "selected" versus "selected_contact"? "selected_input" and "selected_input2"? Give those things actually meaningful values. It'll make your life easier.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.