title: Search Html Table and Display Results Without Refresh
body: <p>I have a group of fields above my table and these fields are used to search my table. Here's a code snippet:</p>
  
  <pre><code>&lt;?php $form = ActiveForm::begin(['id' =&gt; 'devicemgmt-form']); ?&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-5"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-5"&gt;Device Name&lt;/div&gt;
                  &lt;div class="col-sm-7"&gt;
                      &lt;input type="text" name="device-name" class="form-control input-sm"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-5"&gt;Broadcasted Program&lt;/div&gt;
                  &lt;div class="col-sm-7"&gt;
                      &lt;select name="country" class="form-control input-sm"&gt;
                          &lt;option selected disabled&gt;Please Select&lt;/option&gt;
                          &lt;?php
                              foreach($devices as $key =&gt; $value):
                              echo '&lt;option value="'.$key.'"&gt;'.$value['Broadcasted Program'].'&lt;/option&gt;'; 
                              endforeach;
                          ?&gt;
                      &lt;/select&gt;                                
                  &lt;/div&gt;
              &lt;/div&gt; 
              &lt;br&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-5"&gt;Store&lt;/div&gt;
                  &lt;div class="col-sm-7"&gt;
                      &lt;select class="form-control input-sm"&gt;
                          &lt;option selected disabled&gt;Please Select&lt;/option&gt;
                          &lt;option&gt;1&lt;/option&gt;
                          &lt;option&gt;2&lt;/option&gt;
                          &lt;option&gt;3&lt;/option&gt;
                          &lt;option&gt;4&lt;/option&gt;
                          &lt;option&gt;5&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
          &lt;div class="col-sm-5"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-5"&gt;Model name&lt;/div&gt;
                  &lt;div class="col-sm-7"&gt;
                      &lt;select name="country" class="form-control input-sm"&gt;
                          &lt;option selected disabled&gt;Please Select&lt;/option&gt;
                          &lt;?php
                              foreach($devices as $key =&gt; $value):
                              echo '&lt;option value="'.$key.'"&gt;'.$value['Device Model'].'&lt;/option&gt;'; 
                              endforeach;
                          ?&gt;
                      &lt;/select&gt; 
                  &lt;/div&gt;
              &lt;/div&gt; 
              &lt;br&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-5"&gt;Status&lt;/div&gt;
                  &lt;div class="col-sm-7"&gt;
                      &lt;select class="form-control input-sm"&gt;
                          &lt;option selected disabled&gt;Please Select&lt;/option&gt;
                          &lt;option&gt;Started&lt;/option&gt;
                          &lt;option&gt;Pending&lt;/option&gt;
                          &lt;option&gt;Complete&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt; 
              &lt;br&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-5"&gt;Log Output Date&lt;/div&gt;
                  &lt;div class="col-sm-7"&gt;
                      &lt;input type="text" name="device-name" class="form-control input-sm"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-2"&gt;
              &lt;div class="row" style="height: 98px;"&gt;&lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;button href="#" class="btn download-btn" id="downloadBtn"&gt;Log Download&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;?php ActiveForm::end(); ?&gt;
  
  &lt;div class="container-fluid"&gt;            
      &lt;table id="device-list_table" class="table table-striped table-bordered dataTable display"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th class="text-center"&gt;&lt;input type="checkbox" id="selectAll"&gt;&lt;/th&gt;
                  &lt;th class="text-center"&gt;Device Name&lt;/th&gt;
                  &lt;th class="text-center"&gt;Device Model&lt;/th&gt;
                  &lt;th class="text-center"&gt;Broadcasted Program&lt;/th&gt;
                  &lt;th class="text-center" colspan="2"&gt;Device Status&lt;/th&gt;
                  &lt;th class="text-center"&gt;Last Communication Date and Time&lt;/th&gt;
                  &lt;th class="text-center"&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;?php foreach($devices as $key =&gt; $value) { ?&gt;
              &lt;tr&gt;
                  &lt;td class="text-center"&gt;&lt;input type="checkbox" name="device-checkbox" value="&lt;?= $value['Device Name'] ?&gt;" id="&lt;?php echo 'boxId'.$key ?&gt;"&gt;&lt;/td&gt;
                  &lt;td class="text-center"&gt;&lt;?= $value['Device Name']; ?&gt;&lt;/td&gt;
                  &lt;td class="text-center"&gt;&lt;?= $value['Device Model']; ?&gt;&lt;/td&gt;
                  &lt;td class="text-center"&gt;&lt;?= $value['Broadcasted Program']; ?&gt;&lt;/td&gt;
                  &lt;td class="text-center"&gt;
                      &lt;?php
                          if ($value['Device Status'] == "Start") {
                              echo "&lt;font color='yellow'&gt;&amp;#x26AB;&lt;/font&gt;";
                          } elseif ($value['Device Status'] == "Pending") {
                              echo "&lt;font color='red'&gt;&amp;#x26AB;&lt;/font&gt;";
                          } elseif ($value['Device Status'] == "Complete") {
                              echo "&lt;font color='green'&gt;&amp;#x26AB;&lt;/font&gt;";
                          }
                      ?&gt;
                  &lt;/td&gt;
                  &lt;td class="text-center"&gt;&lt;?= $value['Device Status']; ?&gt;&lt;/td&gt;
                  &lt;td class="text-center"&gt;&lt;?= $value['Last Communication Date and Time']; ?&gt;&lt;/td&gt;
                  &lt;td class="text-center"&gt;
                      &lt;ul class="list-inline"&gt;
                          &lt;li&gt;
                              &lt;button href="#" class="btn"&gt;
                                  Display Log
                              &lt;/button&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;button href="#" class="btn"&gt;
                                  Edit
                              &lt;/button&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;?php } ?&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I search data in my table and display the results (inside the same table) without refreshing the page? As you can see, I have a "Log Download" button, maybe when I click that, the results will then show.</p>
  
  <p>EDIT:
  Somewhat like the implementation of dataTables (<a href="https://www.datatables.net/" rel="nofollow">https://www.datatables.net/</a>) but in my case, I have multiple form fields to use in searching.</p>