how to filter datatable year and month of date using jQuery?

Question

I have a datatable of scores of workers in different construction sites, in my example ALI TAHIRI working on the date 2020-03-15 in the construction site IHJAMN, I want to filter datatable by year and month, for example if I put 2020 in year and 03 in a month you must give me line 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

Hello you can try this code: 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

You can do it this way, knowing that it automatically updates your values so you don't need to press search.

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