javascript - 如何使用 jQuery 过滤数据表的年份和月份？

Question

我有一个包含不同建筑工地数十名 worker 的数据表，在我的示例中，ALI TAHIRI 于 2020 年 3 月 15 日在建筑工地 IHJAMN 工作，我想按年份和月份过滤数据表，例如，如果我将 2020 年放入年份，将 03 放入一个月，你必须给我线路 NAJIB MARZOUK。

$(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);
});

<div class="container">
  <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>2015-03-15</td>
            <td>ihjamn</td>
          </tr>
          <tr>
            <td>mahjoub zerou</td>
            <td>2010-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">

Answer 1

您好，您可以尝试以下代码: https://jsfiddle.net/vf2r3pa8/

$(document).ready(function() {
  var table = $('#example').DataTable();
  let now = new Date();
  let year = now.getFullYear();
  let month = ("0" + (now.getMonth() + 1)).slice(-2);
  $('#annee').val(year);
  $('#mois').val(month);
  
  $(document).on("click",".btn-theme", function(){
    var year = $('#annee').val();
  	var month = $('#mois').val();
    var serachVal = year+"-"+month;
    table
            .column( 1)
            .search( serachVal)
            .draw();
  });
});

<div class="container">
  <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>2015-03-15</td>
            <td>ihjamn</td>
          </tr>
          <tr>
            <td>mahjoub zerou</td>
            <td>2010-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">