Как отфильтровать датируемый год и месяц от даты, используя jQuery?

Question

У меня есть набор данных о десятках рабочих на разных строительных площадках, в моем примере АЛИ ТАХИРИ, работающая на дату 2020-03-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">

Answer 2

Вы можете сделать это таким образом, зная, что он автоматически обновляет ваши значения, поэтому вам не нужно нажимать кнопку поиска.

https://jsfiddle.net/6arevzju/

$(document).ready(function() {
  var table = $('#example').DataTable();

  // Event listener to the two range filtering inputs to redraw on input
  $('#mois, #annee').keyup(function() {
    table.draw();
  });

  $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
      var month = parseInt($('#mois').val(), 10);
      var year = parseInt($('#annee').val(), 10);
      var date = data[1].split('-');
      if ((isNaN(year) && isNaN(month)) ||
        (isNaN(month) && year == date[0]) ||
        (date[1] == month && isNaN(year)) ||
        (date[1] == month && year == date[0])
      ) {
        return true;
      }
      return false;
    }
  );
});

<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">