dataTable 自定義搜尋條件
阿新 • • 發佈:2019-01-23
<p> 輸入一組範圍: </p> <table border="0" cellspacing="5" cellpadding="5"> <tbody><tr> <td>最小年齡:</td> <td><input type="text" id="min" name="min"></td> </tr> <tr> <td>最大年齡:</td> <td><input type="text" id="max" name="max"></td> </tr> </tbody> </table> <!-- 表格開始 --> <table id="example" class="display" cellspacing="0" 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>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Shad Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$183,000</td> </tr> <tr> <td>Michael Bruce</td> <td>Javascript Developer</td> <td>Singapore</td> <td>29</td> <td>2011/06/27</td> <td>$183,000</td> </tr> <tr> <td>Donna Snider</td> <td>Customer Support</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$112,000</td> </tr> </tbody> </table> <!-- 表格結束 -->
$.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) { var min = parseInt( $('#min').val(), 10 ); var max = parseInt( $('#max').val(), 10 ); var age = parseFloat( data[3] ) || 0; // use data for the age column if ( ( isNaN( min ) && isNaN( max ) ) || ( isNaN( min ) && age <= max ) || ( min <= age && isNaN( max ) ) || ( min <= age && age <= max ) ) { return true; } return false; } ); $(document).ready(function() { var table = $('#example').DataTable(); // Event listener to the two range filtering inputs to redraw on input $('#min, #max').keyup( function() { table.draw(); } ); } );