如何使用jQuery過濾數據表的年份和月份？

Question

我有一個包含不同建築工地工人的數據表，在我的示例中，ALI TAHIRI 於 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">