如何在加入2个表后在Codeigniter视图中使用过滤器

Question

I am a fresher in Codeigniter and stuck with a basic requirement to display a filter in my view. I have a table (companies) with member details and another table named "accounts". There I have stored Payment details of each member. So The Question is, I have to fetch details of All members and the members who missed payment into one view. I have joined 2 tables to match the member ID (bh_id) with accounts table, So I could get the missed member details when the member ID is not present in accounts. I have both output with me But Instead of displaying this as 2 views I want to display it in a single view by using a dropdown filter Like 1) All Members 2) Missed Members.

Please See the attached screenshots:

TABLE-companies :

TABLE-accounts :

Proposed view :

Now let see my code what I have so far. Company_model.php

//Joining accounts to get missed member details in view
public function missed_members(){
    $this->db->select("*");
    $this->db->from("companies");
    $this->db->join('accounts','accounts.bh_id = companies.bh_id','left');
    $this->db->where('accounts.bh_id IS NULL');
    $this->db->group_by('companies.bh_id');
    $query = $this->db->get();
    return $query->result();
}

Company.php (Controller)

public function index()
{

    //All Companies
    $data['company_data']= $this->Company_model->companies("companies");
    // Missed Members
    $data['missedmembers'] = $this->Company_model->missed_members();
    $data['tab'] = 'tab1';
    $data["page"] = "companies/company";
    $this->load->view('dashboard', $data);
}

company.php (VIEW)

    <section id="main-content">
  <section class="wrapper">
  <!-- page start-->
    <div class="row">
      <div class="col-lg-12">
      <!--breadcrumbs start -->
          <ul class="breadcrumb">
            <li><a href="#"><i class="fa fa-building-o"></i> Accounts</a></li>
            <li><a href="#">Member</a></li>
          </ul>
      <!--breadcrumbs end -->
          <section class="panel">
            <header class="panel-heading"> 
                  <a href="<?= base_url("company/add_company") ?>">
                    <button class="btn btn-primary btn-sm">
                      <i class="fa fa-plus-circle" aria-hidden="true"></i> Add New Member
                    </button>
                  </a> 

               <span class="tools pull-right">
                  <a href="javascript:;" class="fa fa-chevron-down"></a>
                  <a href="javascript:;" class="fa fa-times"></a>
               </span>
               <select>
                 <option>All Members</option>
                 <option>Missed Members</option>
               </select>
            </header>
            <div class="panel-body">
              <section>
                <div class="adv-table">
                <table class="display table table-bordered table-striped" id="dynamic-table">
                  <thead class="cf">
                  <tr>
                      <th>Book No</th>
                      <th>Name</th>
                      <th>Phone</th>
                      <th>Area</th>
                      <th>Staff Name</th>
                      <th>Book Details</th>
                      <th>Edit</th>
                      <th>Delete</th>
                  </tr>
                  </thead>
                  <tbody>
                  <?php 
                  foreach ($company_data as $value)
                    {
                  ?> 
                   <tr>
                     <td>
                        <?= $value->bh_m_id; ?>
                     </td>  
                     <td>
                        <?= $value->bh_name; ?>
                     </td> 
                      <td>
                        <?= $value->bh_phone; ?>
                     </td>
                     <td>
                        <?= $value->bh_area; ?>
                     </td>
                     <td>
                        <?= $value->ca_name; ?>
                     </td>
                     <td>
                        <a href="<?= base_url("accounts/index")?>/<?= $value->bh_id ?>">
                          <button class="btn btn-primary btn-xs">View Book</button>
                        </a>      
                     </td>         
                     <td>

                        <a href="<?= base_url("company/edit") ?>/<?= $value->bh_id ?>">
                           <button class="btn btn-success btn-xs"><span class="glyphicon glyphicon-edit"> </span> Edit</button>
                        </a> 
                     </td>
                     <td>
                        <a href="<?= base_url("company/delete") ?>/<?= $value->bh_id ?>"
                                onclick="return confirm('Do You Really Want To Delete This Record')">
                            <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"> </span> Delete</button> 
                        </a>
                     </td>
                   </tr>
                   <?php 
                    } 
                   ?> 
                </tbody>
              </table>
            </div>
            </section>
          </div>
        </section>
      </div>
    </div>
  </section>
</section>

Please help me to achieve this. Thanks for the Help :)

Answer 1

There are two ways to do that
First with ajax
Second hide and show

Because you are a newbie in Codeigniter, I will explain you second one
first thing make two table design with respective ids
use

<table style='display:block;' class="table table-bordered table-striped" id="allMember_table">
respective code like you wrote in your view now
</table>

instead of

<table class="display table table-bordered table-striped" id="dynamic-table">

and for missed Members

<table style='display:none;' class="table table-bordered table-striped" id="missedMember_table">
respective code like you wrote in your view now
</table>

Now paste dropdown code from here:

<select onchange="change_view(this.value);">
   <option value="all">All Members</option>
   <option value="missed">Missed Members</option>
</select>

Now paste javascript function from here:
paste it at bottom of the view

<script type="text/javascript">

function change_view(value){
  if(value == "all"){
     document.getElementById("allMember_table").style.display = "block";
     document.getElementById("missedMember_table").style.display = "none";
  }else{
     document.getElementById("missedMember_table").style.display = "block";
     document.getElementById("allMember_table").style.display = "none";
  }
}

</script>