jquery - How to search and filter which table columns are displayed -
i have data table has 100+ columns:
- california - los angeles
- california - sf
- illinois - chicago
- texas - austin
- texas - houston
..... etc
how can create search input field allows me filter columns being shown? i'm thinking similar this.
except instead of searching & filtering table rows, want filter & search table columns. if full search text found in of columns, display columns.
for example, if search text "cal", "california - los angeles" , "california - sf" columns visible. if search text "t", column letter 't' in displayed.
you can make use of columns().visible() api method set column visibility.
see example below code, comments , demonstration.
$(document).ready(function() { var headers = {}; $('#example') .on('init.dt', function () { // enumerate headings once $('#example').datatable().columns().every( function (){ // store heading headers[this.index()] = $(this.header()).text().tolowercase(); }); }); // create table $('#example').datatable({ "searching": false }); $('#table-filter').on('keyup', function () { var query = this.value.tolowercase(); if(query !== ""){ // enumerate headings for(index in headers){ if(headers.hasownproperty(index)){ // if query not part of heading if(headers[index].indexof(query) == -1){ // hide column $('#example').datatable().column(index).visible(false, false); } else { // show column $('#example').datatable().column(index).visible(true, false); } } } // redraw table $('#example').datatable().columns.adjust().draw(false); // otherwise, if query empty } else { // show columns $('#example').datatable().columns().visible(true, false); } }); });<!doctype html> <html> <head> <meta charset="iso-8859-1"> <link href="//cdn.datatables.net/1.10.7/css/jquery.datatables.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.7/js/jquery.datatables.min.js"></script> </head> <body> <p> search: <input type="text" id="table-filter" value="" placeholder="enter column name"> </p> <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> <tr> <td>airi satou</td> <td>accountant</td> <td>tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>brielle williamson</td> <td>integration specialist</td> <td>new york</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>herrod chandler</td> <td>sales assistant</td> <td>san francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>rhona davidson</td> <td>integration specialist</td> <td>tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>colleen hurst</td> <td>javascript developer</td> <td>san francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>sonya frost</td> <td>software engineer</td> <td>edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> <tr> <td>jena gaines</td> <td>office manager</td> <td>london</td> <td>30</td> <td>2008/12/19</td> <td>$90,560</td> </tr> <tr> <td>quinn flynn</td> <td>support lead</td> <td>edinburgh</td> <td>22</td> <td>2013/03/03</td> <td>$342,000</td> </tr> <tr> <td>charde marshall</td> <td>regional director</td> <td>san francisco</td> <td>36</td> <td>2008/10/16</td> <td>$470,600</td> </tr> <tr> <td>haley kennedy</td> <td>senior marketing designer</td> <td>london</td> <td>43</td> <td>2012/12/18</td> <td>$313,500</td> </tr> <tr> <td>tatyana fitzpatrick</td> <td>regional director</td> <td>london</td> <td>19</td> <td>2010/03/17</td> <td>$385,750</td> </tr> <tr> <td>michael silva</td> <td>marketing designer</td> <td>london</td> <td>66</td> <td>2012/11/27</td> <td>$198,500</td> </tr> <tr> <td>paul byrd</td> <td>chief financial officer (cfo)</td> <td>new york</td> <td>64</td> <td>2010/06/09</td> <td>$725,000</td> </tr> <tr> <td>gloria little</td> <td>systems administrator</td> <td>new york</td> <td>59</td> <td>2009/04/10</td> <td>$237,500</td> </tr> <tr> <td>bradley greer</td> <td>software engineer</td> <td>london</td> <td>41</td> <td>2012/10/13</td> <td>$132,000</td> </tr> <tr> <td>dai rios</td> <td>personnel lead</td> <td>edinburgh</td> <td>35</td> <td>2012/09/26</td> <td>$217,500</td> </tr> <tr> <td>jenette caldwell</td> <td>development lead</td> <td>new york</td> <td>30</td> <td>2011/09/03</td> <td>$345,000</td> </tr> <tr> <td>yuri berry</td> <td>chief marketing officer (cmo)</td> <td>new york</td> <td>40</td> <td>2009/06/25</td> <td>$675,000</td> </tr> <tr> <td>caesar vance</td> <td>pre-sales support</td> <td>new york</td> <td>21</td> <td>2011/12/12</td> <td>$106,450</td> </tr> <tr> <td>doris wilder</td> <td>sales assistant</td> <td>sidney</td> <td>23</td> <td>2010/09/20</td> <td>$85,600</td> </tr> <tr> <td>angelica ramos</td> <td>chief executive officer (ceo)</td> <td>london</td> <td>47</td> <td>2009/10/09</td> <td>$1,200,000</td> </tr> <tr> <td>gavin joyce</td> <td>developer</td> <td>edinburgh</td> <td>42</td> <td>2010/12/22</td> <td>$92,575</td> </tr> <tr> <td>jennifer chang</td> <td>regional director</td> <td>singapore</td> <td>28</td> <td>2010/11/14</td> <td>$357,650</td> </tr> <tr> <td>brenden wagner</td> <td>software engineer</td> <td>san francisco</td> <td>28</td> <td>2011/06/07</td> <td>$206,850</td> </tr> <tr> <td>fiona green</td> <td>chief operating officer (coo)</td> <td>san francisco</td> <td>48</td> <td>2010/03/11</td> <td>$850,000</td> </tr> <tr> <td>shou itou</td> <td>regional marketing</td> <td>tokyo</td> <td>20</td> <td>2011/08/14</td> <td>$163,000</td> </tr> <tr> <td>michelle house</td> <td>integration specialist</td> <td>sidney</td> <td>37</td> <td>2011/06/02</td> <td>$95,400</td> </tr> <tr> <td>suki burks</td> <td>developer</td> <td>london</td> <td>53</td> <td>2009/10/22</td> <td>$114,500</td> </tr> <tr> <td>prescott bartlett</td> <td>technical author</td> <td>london</td> <td>27</td> <td>2011/05/07</td> <td>$145,000</td> </tr> <tr> <td>gavin cortez</td> <td>team leader</td> <td>san francisco</td> <td>22</td> <td>2008/10/26</td> <td>$235,500</td> </tr> <tr> <td>martena mccray</td> <td>post-sales support</td> <td>edinburgh</td> <td>46</td> <td>2011/03/09</td> <td>$324,050</td> </tr> <tr> <td>unity butler</td> <td>marketing designer</td> <td>san francisco</td> <td>47</td> <td>2009/12/09</td> <td>$85,675</td> </tr> <tr> <td>howard hatfield</td> <td>office manager</td> <td>san francisco</td> <td>51</td> <td>2008/12/16</td> <td>$164,500</td> </tr> <tr> <td>hope fuentes</td> <td>secretary</td> <td>san francisco</td> <td>41</td> <td>2010/02/12</td> <td>$109,850</td> </tr> <tr> <td>vivian harrell</td> <td>financial controller</td> <td>san francisco</td> <td>62</td> <td>2009/02/14</td> <td>$452,500</td> </tr> <tr> <td>timothy mooney</td> <td>office manager</td> <td>london</td> <td>37</td> <td>2008/12/11</td> <td>$136,200</td> </tr> <tr> <td>jackson bradshaw</td> <td>director</td> <td>new york</td> <td>65</td> <td>2008/09/26</td> <td>$645,750</td> </tr> <tr> <td>olivia liang</td> <td>support engineer</td> <td>singapore</td> <td>64</td> <td>2011/02/03</td> <td>$234,500</td> </tr> <tr> <td>bruno nash</td> <td>software engineer</td> <td>london</td> <td>38</td> <td>2011/05/03</td> <td>$163,500</td> </tr> <tr> <td>sakura yamamoto</td> <td>support engineer</td> <td>tokyo</td> <td>37</td> <td>2009/08/19</td> <td>$139,575</td> </tr> <tr> <td>thor walton</td> <td>developer</td> <td>new york</td> <td>61</td> <td>2013/08/11</td> <td>$98,540</td> </tr> <tr> <td>finn camacho</td> <td>support engineer</td> <td>san francisco</td> <td>47</td> <td>2009/07/07</td> <td>$87,500</td> </tr> <tr> <td>serge baldwin</td> <td>data coordinator</td> <td>singapore</td> <td>64</td> <td>2012/04/09</td> <td>$138,575</td> </tr> <tr> <td>zenaida frank</td> <td>software engineer</td> <td>new york</td> <td>63</td> <td>2010/01/04</td> <td>$125,250</td> </tr> <tr> <td>zorita serrano</td> <td>software engineer</td> <td>san francisco</td> <td>56</td> <td>2012/06/01</td> <td>$115,000</td> </tr> <tr> <td>jennifer acosta</td> <td>junior javascript developer</td> <td>edinburgh</td> <td>43</td> <td>2013/02/01</td> <td>$75,650</td> </tr> <tr> <td>cara stevens</td> <td>sales assistant</td> <td>new york</td> <td>46</td> <td>2011/12/06</td> <td>$145,600</td> </tr> <tr> <td>hermione butler</td> <td>regional director</td> <td>london</td> <td>47</td> <td>2011/03/21</td> <td>$356,250</td> </tr> <tr> <td>lael greer</td> <td>systems administrator</td> <td>london</td> <td>21</td> <td>2009/02/27</td> <td>$103,500</td> </tr> <tr> <td>jonas alexander</td> <td>developer</td> <td>san francisco</td> <td>30</td> <td>2010/07/14</td> <td>$86,500</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> </body> </html>
Comments
Post a Comment