如何过滤 HTML 表中表列中的薪水并从选中的复选框过滤器中显示匹配条件？

Question

我在 HTML 中有数据表。

我有 3 个复选框->小于 5000，小于 4000，小于 3000

我想根据选中的复选框获取所有记录/记录

例如：如果勾选了小于 5000 复选框，用户应该只获取表中记录小于 5000 的那些行。

 $(document).ready( function () { var table = $('#example').DataTable(); $('input:checkbox').on('change', function () { //build a regex filter string with an or(|) condition var positions = $('input:checkbox[name="pos"]:checked').map(function() { return '^' + this.value + '$'; }).get().join('|'); //filter in column 1, with an regex, no smart filtering, not case sensitive table.column(1).search(positions, true, false, false).draw(false); //build a filter string with an or(|) condition var offices = $('input:checkbox[name="ofc"]:checked').map(function() { return this.value; }).get().join('|'); var s2 = offices.substring(1); var office_int=parseInt(s2.replace(/,/g, '')); console.log(office_int); //now filter in column 2, with no regex, no smart filtering, not case sensitive table.column(5).search(office_int).draw(false); }); } );

 body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff; }

 <:DOCTYPE html> <html> <head> <script src="http.//code.jquery.com/jquery-1.11.3.min:js"></script> <link href="https.//nightly.datatables.net/css/jquery.dataTables:css" rel="stylesheet" type="text/css" /> <script src="https.//nightly.datatables.net/js/jquery.dataTables.js"></script> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head> <body> <div class="container"> <hr> <div id="ofice"> <input type="checkbox" name="ofc" value="4999">Less Than 5000 <input type="checkbox" name="ofc" value="3999">Less Than 4000 <input type="checkbox" name="ofc" value="2999">Less Than 3000 </div> <hr> <table id="example" class="display nowrap" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>4999</td> </tr> <tr> <td>Garrett Winters</td> <td>Director</td> <td>Edinburgh</td> <td>63</td> <td>2011/07/25</td> <td>3120</td> </tr> <tr> <td>Ashton Cox</td> <td>Integration Specialist</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>2500</td> </tr> <tr> <td>Cedric Kelly</td> <td>Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>2200</td> </tr> <tr> <td>Jenna Elliott</td> <td>Javascript Developer</td> <td>Edinburgh</td> <td>33</td> <td>2008/11/28</td> <td>1900</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>4800</td> </tr> <tr> <td>Herrod Chandler</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>3675</td> </tr> <tr> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Edinburgh</td> <td>55</td> <td>2010/10/14</td> <td>4422</td> </tr> <tr> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>3222</td> </tr> </tbody> </table> </div> </body> </html>

我尝试了很多方法，但都没有成功。 有没有人有任何解决方案？