title: Filter dynamic data table in php
body: <p><a href="https://i.stack.imgur.com/gLvxF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gLvxF.jpg" alt="enter image description here"></a></p>
  
  <p>I have my first website developed in php which users can display employee bio-metric logs and they can manipulate what department should display in the table by selecting in combo-list and also can be exported through excel. Now i want to filter my data with date range using date 2 time-picker, can someone show me some links or examples that can easily to understand for newbie like me. Below is my Index.php</p>
  
  <p>Index.php</p>
  
  <pre><code>    &lt;?php
        $conn =mysqli_connect("localhost", "root", "", "bio_db");
  
        function filterTable($sql)
         {
          $connect = mysqli_connect("localhost", "root", "","bio_db");
          $filter_Result = mysqli_query($connect, $sql);
          return $filter_Result;
        }
  
        $post_at = "";
        $post_at_to_date = "";
        $queryCondition = "";
  
      if(isset($_POST["search"]["post_at"])) {
      $post_at = $_POST["search"]["post_at"];
      list($fid,$fim,$fiy) = explode("-",$post_at);
  
  
      $post_at_to_date = date('Y-m-d');
      if(isset($_POST["search"]["post_at_to_date"])) {
          $post_at_to_date = $_POST["search"]["post_at_to_date"];
          list($tiy,$tim,$tid) = explode("-",$_POST["search"] ["post_at_to_date"]);
          $post_at_to_date = "$tiy-$tim-$tid";
      }
  
          $queryCondition .= "Where post_at BEETWEEN '$fiy-$fim-$fid' AND '" .$post_at_to_date. "'";
  }
  
       else { $sql = "SELECT * from daily_data2 " .$queryCondition. " ORDER BY post_at ASC";
          $search_result = filterTable($sql);
      }
  
  
      ?&gt;
  
  
  
    &lt;html&gt;
     &lt;head&gt;
     &lt;title&gt;Time and Attendance Monitoring&lt;/title&gt;        
     &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
     &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
  
     &lt;style&gt;
      .table-content{border-top:#CCCCCC 4px solid; width:50%;}
      .table-content th {padding:5px 20px; background: #F0F0F0;vertical-align:top;} 
      .table-content td {padding:5px 20px; border-bottom: #F0F0F0 1px     solid;vertical-align:top;} 
      &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
      &lt;div class="demo-content"&gt;
      &lt;h2 class="title_with_link"&gt;Time and Attendance Monitoring&lt;/h2&gt;
     &lt;form name="frmSearch" method="post" action="index.php"&gt;
      &lt;p class="search_input"&gt;
      &lt;input type="text" placeholder="From Date" id="post_at" name="search[post_at]"  value="&lt;?php echo $post_at; ?&gt;" class="input-control" /&gt;
      &lt;input type="text" placeholder="To Date" id="post_at_to_date" name="search[post_at_to_date]" style="margin-left:10px"  value="&lt;?php echo $post_at_to_date; ?&gt;" class="input-control"  /&gt;             
      &lt;input type="submit" name="go" value="Search" &gt;
      &lt;/p&gt;
     &lt;?php if(!empty($result))     { ?&gt;
  
  
  
    &lt;table align="center" width="600" border="1" cellpadding="1" cellspacing="1"&gt;
          &lt;tr&gt;
              &lt;th&gt;Userid&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Campaign&lt;/th&gt;
              &lt;th&gt;Date&lt;/th&gt;
              &lt;th&gt;Hoursworked&lt;/th&gt;
              &lt;th&gt;Overtime&lt;/th&gt;
          &lt;/tr&gt;
  
      &lt;?php while($row = mysqli_fetch_array($search_result)):?&gt;
          &lt;tr&gt;
              &lt;td style="text-align:center;"&gt;&lt;?php echo $row['Userid'];?&gt;&lt;/td&gt;
              &lt;td width="200"&gt;&lt;?php echo $row['Name'];?&gt;&lt;/td&gt;
              &lt;td style="text-align:center;"&gt;&lt;?php echo $row['Campaign'];?&gt;       &lt;/td&gt;
              &lt;td width="100" style="text-align:center;"&gt;&lt;?php echo    $row['Date'];?&gt;&lt;/td&gt;
              &lt;td style="text-align:center;"&gt;&lt;?php echo $row['Hoursworked'];?&gt;&lt;/td&gt;
              &lt;td style="text-align:center;"&gt;&lt;?php echo $row['Overtime'];?&gt;   &lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;?php endwhile;?&gt;
  
          &lt;/table&gt;
     &lt;?php } ?&gt;
     &lt;/form&gt;
     &lt;/div&gt;
     &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
     &lt;script&gt;
     $.datepicker.setDefaults({
      showOn: "button",
      buttonImage: "datepicker.png",
      buttonText: "Date Picker",
      buttonImageOnly: true,
      dateFormat: 'yy-mm-dd'  
     });
      $(function() {
      $("#post_at").datepicker();
      $("#post_at_to_date").datepicker();
      });
     &lt;/script&gt;
     &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>