javascript - Datatables single column search -
i have basic table , search one column.
the code have far here in fiddle.
as can see @ bottom of each column there search filter, there 1 search filter, on office column.
it if search filter @ top, , not @ bottom now.
basically i'd table similar this one, instead of filter on each column, want one filter on one column.
any appreciated.
my code below.
// setup - add text input each footer cell $('#example tfoot th').each(function() { var title = $(this).text(); $(this).html('<input type="text" placeholder="search ' + title + '" />'); }); // datatable var table = $('#example').datatable(); // apply search table.columns().every(function() { var = this; $('input', this.footer()).on('keyup change', function() { if (that.search() !== this.value) { .search(this.value) .draw(); } }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.9/js/jquery.datatables.js"></script> <link href="http://cdn.datatables.net/1.10.0/css/jquery.datatables.css" rel="stylesheet"/> <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>$3,120</td> </tr> <tr> <td>garrett winters</td> <td>director</td> <td>edinburgh</td> <td>63</td> <td>2011/07/25</td> <td>$5,300</td> </tr> <tr> <td>ashton cox</td> <td>technical author</td> <td>san francisco</td> <td>66</td> <td>2009/01/12</td> <td>$4,800</td> </tr> <tr> <td>cedric kelly</td> <td>javascript developer</td> <td>edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$3,600</td> </tr> <tr> <td>jenna elliott</td> <td>financial controller</td> <td>edinburgh</td> <td>33</td> <td>2008/11/28</td> <td>$5,300</td> </tr> <tr> <td>brielle williamson</td> <td>integration specialist</td> <td>new york</td> <td>61</td> <td>2012/12/02</td> <td>$4,525</td> </tr> <tr> <td>herrod chandler</td> <td>sales assistant</td> <td>san francisco</td> <td>59</td> <td>2012/08/06</td> <td>$4,080</td> </tr> <tr> <td>rhona davidson</td> <td>integration specialist</td> <td>edinburgh</td> <td>55</td> <td>2010/10/14</td> <td>$6,730</td> </tr> <tr> <td>colleen hurst</td> <td>javascript developer</td> <td>san francisco</td> <td>39</td> <td>2009/09/15</td> <td>$5,000</td> </tr> <tr> <td>sonya frost</td> <td>software engineer</td> <td>edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$3,600</td> </tr> <tr> <td>jena gaines</td> <td>system architect</td> <td>london</td> <td>30</td> <td>2008/12/19</td> <td>$5,000</td> </tr> <tr> <td>quinn flynn</td> <td>financial controller</td> <td>edinburgh</td> <td>22</td> <td>2013/03/03</td> <td>$4,200</td> </tr> <tr> <td>charde marshall</td> <td>regional director</td> <td>san francisco</td> <td>36</td> <td>2008/10/16</td> <td>$5,300</td> </tr> <tr> <td>haley kennedy</td> <td>senior marketing designer</td> <td>london</td> <td>43</td> <td>2012/12/18</td> <td>$4,800</td> </tr> <tr> <td>tatyana fitzpatrick</td> <td>regional director</td> <td>london</td> <td>19</td> <td>2010/03/17</td> <td>$2,875</td> </tr> <tr> <td>michael silva</td> <td>senior marketing designer</td> <td>london</td> <td>66</td> <td>2012/11/27</td> <td>$3,750</td> </tr> <tr> <td>paul byrd</td> <td>javascript developer</td> <td>new york</td> <td>64</td> <td>2010/06/09</td> <td>$5,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>$3,120</td> </tr> <tr> <td>bradley greer</td> <td>software engineer</td> <td>london</td> <td>41</td> <td>2012/10/13</td> <td>$3,120</td> </tr> <tr> <td>dai rios</td> <td>system architect</td> <td>edinburgh</td> <td>35</td> <td>2012/09/26</td> <td>$4,200</td> </tr> <tr> <td>jenette caldwell</td> <td>financial controller</td> <td>new york</td> <td>30</td> <td>2011/09/03</td> <td>$4,965</td> </tr> <tr> <td>yuri berry</td> <td>system architect</td> <td>new york</td> <td>40</td> <td>2009/06/25</td> <td>$3,600</td> </tr> <tr> <td>caesar vance</td> <td>technical author</td> <td>new york</td> <td>21</td> <td>2011/12/12</td> <td>$4,965</td> </tr> <tr> <td>doris wilder</td> <td>sales assistant</td> <td>edinburgh</td> <td>23</td> <td>2010/09/20</td> <td>$4,965</td> </tr> <tr> <td>angelica ramos</td> <td>system architect</td> <td>london</td> <td>36</td> <td>2009/10/09</td> <td>$2,875</td> </tr> <tr> <td>gavin joyce</td> <td>developer</td> <td>edinburgh</td> <td>42</td> <td>2010/12/22</td> <td>$4,525</td> </tr> <tr> <td>jennifer chang</td> <td>regional director</td> <td>london</td> <td>28</td> <td>2010/11/14</td> <td>$4,080</td> </tr> <tr> <td>brenden wagner</td> <td>software engineer</td> <td>san francisco</td> <td>18</td> <td>2011/06/07</td> <td>$3,750</td> </tr> <tr> <td>ebony grimes</td> <td>software engineer</td> <td>san francisco</td> <td>48</td> <td>2010/03/11</td> <td>$2,875</td> </tr> <tr> <td>russell chavez</td> <td>director</td> <td>edinburgh</td> <td>20</td> <td>2011/08/14</td> <td>$3,600</td> </tr> <tr> <td>michelle house</td> <td>integration specialist</td> <td>edinburgh</td> <td>37</td> <td>2011/06/02</td> <td>$3,750</td> </tr> <tr> <td>suki burks</td> <td>developer</td> <td>london</td> <td>53</td> <td>2009/10/22</td> <td>$2,875</td> </tr> <tr> <td>prescott bartlett</td> <td>technical author</td> <td>london</td> <td>27</td> <td>2011/05/07</td> <td>$6,730</td> </tr> <tr> <td>gavin cortez</td> <td>technical author</td> <td>san francisco</td> <td>22</td> <td>2008/10/26</td> <td>$6,730</td> </tr> <tr> <td>martena mccray</td> <td>integration specialist</td> <td>edinburgh</td> <td>46</td> <td>2011/03/09</td> <td>$4,080</td> </tr> <tr> <td>unity butler</td> <td>senior marketing designer</td> <td>san francisco</td> <td>47</td> <td>2009/12/09</td> <td>$3,750</td> </tr> <tr> <td>howard hatfield</td> <td>financial controller</td> <td>san francisco</td> <td>51</td> <td>2008/12/16</td> <td>$4,080</td> </tr> <tr> <td>hope fuentes</td> <td>financial controller</td> <td>san francisco</td> <td>41</td> <td>2010/02/12</td> <td>$4,200</td> </tr> <tr> <td>vivian harrell</td> <td>system architect</td> <td>san francisco</td> <td>62</td> <td>2009/02/14</td> <td>$4,965</td> </tr> <tr> <td>timothy mooney</td> <td>financial controller</td> <td>london</td> <td>37</td> <td>2008/12/11</td> <td>$4,200</td> </tr> <tr> <td>jackson bradshaw</td> <td>director</td> <td>new york</td> <td>65</td> <td>2008/09/26</td> <td>$5,000</td> </tr> <tr> <td>miriam weiss</td> <td>support engineer</td> <td>edinburgh</td> <td>64</td> <td>2011/02/03</td> <td>$4,965</td> </tr> <tr> <td>bruno nash</td> <td>software engineer</td> <td>london</td> <td>38</td> <td>2011/05/03</td> <td>$4,200</td> </tr> <tr> <td>odessa jackson</td> <td>support engineer</td> <td>edinburgh</td> <td>37</td> <td>2009/08/19</td> <td>$3,600</td> </tr> <tr> <td>thor walton</td> <td>developer</td> <td>new york</td> <td>61</td> <td>2013/08/11</td> <td>$3,600</td> </tr> <tr> <td>finn camacho</td> <td>support engineer</td> <td>san francisco</td> <td>47</td> <td>2009/07/07</td> <td>$4,800</td> </tr> <tr> <td>elton baldwin</td> <td>data coordinator</td> <td>edinburgh</td> <td>64</td> <td>2012/04/09</td> <td>$6,730</td> </tr> <tr> <td>zenaida frank</td> <td>software engineer</td> <td>new york</td> <td>63</td> <td>2010/01/04</td> <td>$4,800</td> </tr> <tr> <td>zorita serrano</td> <td>software engineer</td> <td>san francisco</td> <td>56</td> <td>2012/06/01</td> <td>$5,300</td> </tr> <tr> <td>jennifer acosta</td> <td>javascript developer</td> <td>edinburgh</td> <td>43</td> <td>2013/02/01</td> <td>$2,875</td> </tr> <tr> <td>cara stevens</td> <td>sales assistant</td> <td>new york</td> <td>46</td> <td>2011/12/06</td> <td>$4,800</td> </tr> <tr> <td>hermione butler</td> <td>director</td> <td>london</td> <td>47</td> <td>2011/03/21</td> <td>$4,080</td> </tr> <tr> <td>lael greer</td> <td>systems administrator</td> <td>london</td> <td>21</td> <td>2009/02/27</td> <td>$3,120</td> </tr> <tr> <td>jonas alexander</td> <td>developer</td> <td>san francisco</td> <td>30</td> <td>2010/07/14</td> <td>$5,300</td> </tr> <tr> <td>shad decker</td> <td>regional director</td> <td>edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$5,300</td> </tr> <tr> <td>michael bruce</td> <td>javascript developer</td> <td>edinburgh</td> <td>29</td> <td>2011/06/27</td> <td>$4,080</td> </tr> <tr> <td>donna snider</td> <td>system architect</td> <td>new york</td> <td>27</td> <td>2011/01/25</td> <td>$3,120</td> </tr> </tbody> </table>
just replace code
$('#example tfoot th').each(function() { var title = $(this).text(); $(this).html('<input type="text" placeholder="search ' + title + '" />'); }); with
$('#example thead th').each(function() { var title = $(this).text(); if(title == 'office'){ $(this).append('<br /><input type="text" placeholder="search ' + title + '" />'); } }); as can see replaced tfoot thead set search box on top. , placed condition display search box "office"
Comments
Post a Comment