如何使用jQuery数据表进行多重过滤?

时间:2020-03-03 10:21:36

标签: javascript jquery

我有一个在不同站点工作的员工分数的数据表,例如ali tahiri在2020-03-05日期在ihjamn站点工作,我想对年,月,薪水和双周,如果我选中第一双周,您必须给我第一双周工作的员工,这意味着从01-> 15开始工作的员工,在我的示例中,您只需要给我najib marzoukali tahiri

         <div class="form-panel" id="form1">
          <div class="row" >
           <h4 class="mb"><i class="fa fa-angle-right"></i>Pointage des salaries monsuel</h4>

           <div class=" col-md-10 col-md-offset-1">
             <div class="form-group col-md-3">
              <label for="titre">year</label>
             </div>
             <div class="form-group col-md-5">
               <input type="text" name="datep" id="annee" class="form-control">
             </div>
           </div>
           <div class=" col-md-10 col-md-offset-1">
             <div class="form-group col-md-3">
              <label for="titre">month</label>
             </div>
             <div class="form-group col-md-5">
               <input type="text" name="datep" id="mois" class="form-control">
             </div>
           </div>

           <div class=" col-md-10 col-md-offset-1 ">
            <div class="form-group col-md-4">
              <label for="titre">period</label>
             </div>
            <div class="form-check form-check-inline col-md-3">
              <input type="radio" class="form-check-input" id="q1" name="quanzaime">
              <label class="form-check-label" for="q1">1st Fortnight</label>
            </div>
            <div class="form-check form-check-inline col-md-3">
              <input type="radio" class="form-check-input" id="q2" name="quanzaime">
              <label class="form-check-label" for="q2">2nd Fortnight</label>
            </div>
           </div>

           <div class=" col-md-10 col-md-offset-1 ">
            <div class="form-group col-md-3">
              <label for="titre">Salary</label>
            </div>
            <div class="form-group col-md-5">
              <select class="form-control" id="salarie_id">
                <option selected disabled>Select salarie</option>
                <option value="1">najib marzouk 1</option>
                <option value="2">ali tahiri 2</option>
                <option value="3">mahjoub zerou 3</option>
              </select>
            </div>
          </div>
           <div class=" col-md-10 col-md-offset-1 ">
            <div class="form-group col-md-3">
              <label for="titre">Site</label>
            </div>
            <div class="form-group col-md-5">
              <select class="form-control" id="chantier_id">
                <option selected disabled>Select Location</option>
                <option value="1">azilal</option>
                <option value="2">ihjamn</option>
                <option value="3">asfalou</option>
              </select>
            </div>
          </div>
          <div class="col-md-2 col-md-offset-5">
            <button class="btn btn-theme" type="submit" >cherche</button>
          </div>
         </div>
        </div>

        <div class="form-panel" id="form2">
          <div class="row">

            <table id="example" class="table table-striped table-bordered" style="width:100%">
      <thead>
        <tr>
          <th>salary</th>
          <th>date</th>
          <th>site</th>
        </tr>
      </thead>
      <tbody id="b">
         <tr>
          <td>najib marzouk</td>
          <td>2020-03-05</td>
          <td>azilal</td>
        </tr>
        <tr>
          <td>ali tahiri</td>
          <td>2020-03-15</td>
          <td>ihjamn</td>
        </tr>
        <tr>
          <td>mahjoub zerou</td>
          <td>2020-03-20</td>
          <td>asfalou</td>
        </tr>
      </tbody>
</table>
          </div>
        </div>




    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
   <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

jQuery

<script type="text/javascript">
  $(document).ready(function () {

    $('#example').DataTable();


          let now = new Date();
          let year = now.getFullYear();
          let month = ("0" + (now.getMonth() + 1)).slice(-2);
          $('#annee').val(year);
          $('#mois').val(month); 

        });

  </script>

0 个答案:

没有答案