javascript - Filter a DataTable using input texts client side -
i have html page script inside head, , have datatable id=example, , button id="btnfilter" supposed filter data in datatable based on user typed inside others "input texts tags". i've tried lot of variations found on internet i'm not being able can want.
here html have input , label tags, user type text wants filter:
<table id="filterlog" class="table table-striped"> <thead> <h4>table</h4> </thead> <tfoot> <th> </th> </tfoot> <tbody> <tr> <td><label class="input-group">from:</label></td> <td><label class="input-group">to:</label></td> <td><label class="input-group">created:</label></td> <td><label class="input-group">comp:</label></td> </tr> </tbody> <tr id="linhasfiltro"> <td><input class="form-control" type="date" id="date1" /></td> <td><input class="form-control" type="date" id="date2" /></td> <td><input class="form-control" type="text" id="creator" maxlength="15" /></td> <td><input class="form-control" type="text" id="clog" maxlength="10"/></td> </tr> <tr> <td colspan="4"><label class="input-group">type:</label></td> </tr> <tr> <td colspan="1"> <select id="tipolog" class="form-control"> <option>error</option> <option>test</option> <option>info</option> </select> </td> <td><input type="button" value="filter" id="btnfilter" class="btn btn-primary" /> <input type="button" id="btnexport" value="exportar" class="btn btn-primary" /></td> </tr> <tr class="border:0px;"> <td colspan="6" id="consierror" ></td> </tr> </table>
and want is, when user type inside input id="clog" , click on btnfiltrar, datatable must show rows has same text in column equivalent.
thx guys
please try more specific in yours next questions, show u tryied. people should not write solution, should write have tried , problem , people you.
take @ datatables plugin: https://datatables.net/
working example datatables: https://jsfiddle.net/kt0yotsn/
html:
<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>cedric kelly</td> <td>senior javascript developer</td> <td>edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> </tbody> </table>
javascript:
$(document).ready(function() { $('#example').datatable(); } );
in addition above code, following javascript library files loaded use in example:
//code.jquery.com/jquery-1.12.4.js https://cdn.datatables.net/1.10.15/js/jquery.datatables.min.js
the following css library files loaded use in example provide styling of table:
https://cdn.datatables.net/1.10.15/css/jquery.datatables.min.css
Comments
Post a Comment