Datatables單列搜索

我有一個基本的表，我只想搜索一個列。Datatables單列搜索

我到目前爲止的代碼是here in this fiddle。

正如你可以看到每列的底部有一個搜索過濾器，但我只想在那裏有一個搜索過濾器，在office列。

如果搜索過濾器位於頂部，而不是現在的底部，那也不錯。

基本上，我想我的表，類似於this one，但的而不是在每列的過濾器，我只是想在一個列一個過濾器。

任何幫助表示讚賞。

我的代碼如下。

// Setup - add a text input to 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 the search 
 
table.columns().every(function() { 
 
    var that = this; 
 

 
    $('input', this.footer()).on('keyup change', function() { 
 
    if (that.search() !== this.value) { 
 
     that 
 
     .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>

來源

2016-02-05 johnny_s

只是

$('#example thead th').each(function() { 

    var title = $(this).text(); 
    if(title == 'Office'){ 
    $(this).append('<br /><input type="text" placeholder="Search ' + title + '" />'); 
    } 
});

替換代碼

$('#example tfoot th').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" placeholder="Search ' + title + '" />'); 
});

，你可以看到我更換TFOOT到THEAD設置在頂部的搜索框。和我放置條件來顯示「辦公室」的搜索框

來源

2016-02-05 13:40:11 Mitali

謝謝@Mitali，但這似乎並沒有工作。你試過了嗎？搜索結果無法正確過濾，並且一旦輸入框被點擊，它們似乎會被過濾。 –

Ohhh抱歉。（'keyup change'，function（）「替換爲」$（'input'，this.header（））。，function（）「。 – Mitali

Datatables單列搜索

回答

相關問題