jQuery DataTable：在表头上进行单列搜索

Question

我已经按照 单列搜索（文本输入） 和 单列搜索（选择输入） 的步骤，在jQuery DataTable 上使用了多个筛选器，并在页脚上添加了多个筛选器。但是，我想将这些筛选器移动到DataTable的标题中，但无法像下面的图像中显示的那样水平对齐。有一些示例，例如自定义筛选-范围搜索，但它们也没有对齐。是否可能做到这一点？

$(document).ready(function() {
    // 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();
            }
        } );
    } );
} );

- Jack

---

@Gyrocode.com，由于您是DataTable的真正大师，能否请您帮我解决这个问题？先谢谢了... - Jack

是的，我们可以将这个过滤器移到顶部... - Dipak Thoke

Answer 1

这里是您问题的解决方案，请添加必要的datatable配置。

通过使用CSS，将列过滤器从页脚移动到表头，即仅通过使用

<style>
tfoot {
     display: table-header-group;
}
</style>

https://jsfiddle.net/dipakthoke07/ehhfsrfq/2/

希望这可以帮到你。

- Dipak Thoke

---

抱歉，我正在处理另一个问题，刚刚尝试了您发布的解决方案。搜索输入位于标题上，但搜索参数（sSearch）在传递到控制器时为 null，而它可以通过标准搜索框传递。此外，在标题上的任何搜索框中输入单个字母时（除默认搜索框之外），控制器上的方法会被调用 8-9 次，而在默认搜索框中输入单个字母时只会被调用一次。有什么想法吗？ - Jack

请您看一下问题所在，并告诉我如何解决它，谢谢并点赞+。 - Jack

请尝试使用此链接：https://datatables.net/plug-ins/api/fnFilterOnReturn，它将对您有所帮助。 - Dipak Thoke

@DanielWilliams，您能否请附上您实现的fiddle链接，这样我就可以帮助您了吗？ - Dipak Thoke

@DipakThoke - 这只是一个简单的修复，“autowidth: true”。 - Daniel Williams

Answer 2

这可以通过CSS实现。

$(document).ready(function() { 
 // Setup - add a text input to each footer cell

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

 // DataTable
 var table = $('#example').DataTable({
  "paging":   false,
  "info":     false,
  "scrollY": 200,
  "scrollX": true
 });

 // 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();
   }
  } );
 } );
  
} );

<style>
body{border:0}
.dataTables_scroll{position:relative}
.dataTables_scrollHead{margin-bottom:40px;}
.dataTables_scrollFoot{position:absolute; top:38px}
</style>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<table id="example" class="display nowrap" style="width:100%">
 <thead>
  <tr>
   <th>First name</th>
   <th>Last name</th>
   <th>Position</th>
   <th>Office</th>
   <th>Age</th>
   <th>Start date</th>
   <th>Salary</th>
   <th>Extn.</th>
   <th>E-mail</th>
  </tr>
 </thead>
 
 <tfoot>
  <tr>
   <th>First name</th>
   <th>Last name</th>
   <th>Position</th>
   <th>Office</th>
   <th>Age</th>
   <th>Start date</th>
   <th>Salary</th>
   <th>Extn.</th>
   <th>E-mail</th>
  </tr>
 </tfoot>
 
 <tbody>
  <tr>
   <td>Tiger</td>
   <td>Nixon</td>
   <td>System Architect</td>
   <td>Edinburgh</td>
   <td>61</td>
   <td>2011/04/25</td>
   <td>$320,800</td>
   <td>5421</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Garrett</td>
   <td>Winters</td>
   <td>Accountant</td>
   <td>Tokyo</td>
   <td>63</td>
   <td>2011/07/25</td>
   <td>$170,750</td>
   <td>8422</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Ashton</td>
   <td>Cox</td>
   <td>Junior Technical Author</td>
   <td>San Francisco</td>
   <td>66</td>
   <td>2009/01/12</td>
   <td>$86,000</td>
   <td>1562</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Cedric</td>
   <td>Kelly</td>
   <td>Senior Javascript Developer</td>
   <td>Edinburgh</td>
   <td>22</td>
   <td>2012/03/29</td>
   <td>$433,060</td>
   <td>6224</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Airi</td>
   <td>Satou</td>
   <td>Accountant</td>
   <td>Tokyo</td>
   <td>33</td>
   <td>2008/11/28</td>
   <td>$162,700</td>
   <td>5407</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Brielle</td>
   <td>Williamson</td>
   <td>Integration Specialist</td>
   <td>New York</td>
   <td>61</td>
   <td>2012/12/02</td>
   <td>$372,000</td>
   <td>4804</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Herrod</td>
   <td>Chandler</td>
   <td>Sales Assistant</td>
   <td>San Francisco</td>
   <td>59</td>
   <td>2012/08/06</td>
   <td>$137,500</td>
   <td>9608</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Rhona</td>
   <td>Davidson</td>
   <td>Integration Specialist</td>
   <td>Tokyo</td>
   <td>55</td>
   <td>2010/10/14</td>
   <td>$327,900</td>
   <td>6200</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Colleen</td>
   <td>Hurst</td>
   <td>Javascript Developer</td>
   <td>San Francisco</td>
   <td>39</td>
   <td>2009/09/15</td>
   <td>$205,500</td>
   <td>2360</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Sonya</td>
   <td>Frost</td>
   <td>Software Engineer</td>
   <td>Edinburgh</td>
   <td>23</td>
   <td>2008/12/13</td>
   <td>$103,600</td>
   <td>1667</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Jena</td>
   <td>Gaines</td>
   <td>Office Manager</td>
   <td>London</td>
   <td>30</td>
   <td>2008/12/19</td>
   <td>$90,560</td>
   <td>3814</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Quinn</td>
   <td>Flynn</td>
   <td>Support Lead</td>
   <td>Edinburgh</td>
   <td>22</td>
   <td>2013/03/03</td>
   <td>$342,000</td>
   <td>9497</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Charde</td>
   <td>Marshall</td>
   <td>Regional Director</td>
   <td>San Francisco</td>
   <td>36</td>
   <td>2008/10/16</td>
   <td>$470,600</td>
   <td>6741</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Haley</td>
   <td>Kennedy</td>
   <td>Senior Marketing Designer</td>
   <td>London</td>
   <td>43</td>
   <td>2012/12/18</td>
   <td>$313,500</td>
   <td>3597</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Tatyana</td>
   <td>Fitzpatrick</td>
   <td>Regional Director</td>
   <td>London</td>
   <td>19</td>
   <td>2010/03/17</td>
   <td>$385,750</td>
   <td>1965</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Michael</td>
   <td>Silva</td>
   <td>Marketing Designer</td>
   <td>London</td>
   <td>66</td>
   <td>2012/11/27</td>
   <td>$198,500</td>
   <td>1581</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Paul</td>
   <td>Byrd</td>
   <td>Chief Financial Officer (CFO)</td>
   <td>New York</td>
   <td>64</td>
   <td>2010/06/09</td>
   <td>$725,000</td>
   <td>3059</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Gloria</td>
   <td>Little</td>
   <td>Systems Administrator</td>
   <td>New York</td>
   <td>59</td>
   <td>2009/04/10</td>
   <td>$237,500</td>
   <td>1721</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Bradley</td>
   <td>Greer</td>
   <td>Software Engineer</td>
   <td>London</td>
   <td>41</td>
   <td>2012/10/13</td>
   <td>$132,000</td>
   <td>2558</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Dai</td>
   <td>Rios</td>
   <td>Personnel Lead</td>
   <td>Edinburgh</td>
   <td>35</td>
   <td>2012/09/26</td>
   <td>$217,500</td>
   <td>2290</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Jenette</td>
   <td>Caldwell</td>
   <td>Development Lead</td>
   <td>New York</td>
   <td>30</td>
   <td>2011/09/03</td>
   <td>$345,000</td>
   <td>1937</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Yuri</td>
   <td>Berry</td>
   <td>Chief Marketing Officer (CMO)</td>
   <td>New York</td>
   <td>40</td>
   <td>2009/06/25</td>
   <td>$675,000</td>
   <td>6154</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Caesar</td>
   <td>Vance</td>
   <td>Pre-Sales Support</td>
   <td>New York</td>
   <td>21</td>
   <td>2011/12/12</td>
   <td>$106,450</td>
   <td>8330</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Doris</td>
   <td>Wilder</td>
   <td>Sales Assistant</td>
   <td>Sidney</td>
   <td>23</td>
   <td>2010/09/20</td>
   <td>$85,600</td>
   <td>3023</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Angelica</td>
   <td>Ramos</td>
   <td>Chief Executive Officer (CEO)</td>
   <td>London</td>
   <td>47</td>
   <td>2009/10/09</td>
   <td>$1,200,000</td>
   <td>5797</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Gavin</td>
   <td>Joyce</td>
   <td>Developer</td>
   <td>Edinburgh</td>
   <td>42</td>
   <td>2010/12/22</td>
   <td>$92,575</td>
   <td>8822</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Jennifer</td>
   <td>Chang</td>
   <td>Regional Director</td>
   <td>Singapore</td>
   <td>28</td>
   <td>2010/11/14</td>
   <td>$357,650</td>
   <td>9239</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Brenden</td>
   <td>Wagner</td>
   <td>Software Engineer</td>
   <td>San Francisco</td>
   <td>28</td>
   <td>2011/06/07</td>
   <td>$206,850</td>
   <td>1314</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Fiona</td>
   <td>Green</td>
   <td>Chief Operating Officer (COO)</td>
   <td>San Francisco</td>
   <td>48</td>
   <td>2010/03/11</td>
   <td>$850,000</td>
   <td>2947</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Shou</td>
   <td>Itou</td>
   <td>Regional Marketing</td>
   <td>Tokyo</td>
   <td>20</td>
   <td>2011/08/14</td>
   <td>$163,000</td>
   <td>8899</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Michelle</td>
   <td>House</td>
   <td>Integration Specialist</td>
   <td>Sidney</td>
   <td>37</td>
   <td>2011/06/02</td>
   <td>$95,400</td>
   <td>2769</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Suki</td>
   <td>Burks</td>
   <td>Developer</td>
   <td>London</td>
   <td>53</td>
   <td>2009/10/22</td>
   <td>$114,500</td>
   <td>6832</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Prescott</td>
   <td>Bartlett</td>
   <td>Technical Author</td>
   <td>London</td>
   <td>27</td>
   <td>2011/05/07</td>
   <td>$145,000</td>
   <td>3606</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Gavin</td>
   <td>Cortez</td>
   <td>Team Leader</td>
   <td>San Francisco</td>
   <td>22</td>
   <td>2008/10/26</td>
   <td>$235,500</td>
   <td>2860</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Martena</td>
   <td>Mccray</td>
   <td>Post-Sales support</td>
   <td>Edinburgh</td>
   <td>46</td>
   <td>2011/03/09</td>
   <td>$324,050</td>
   <td>8240</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Unity</td>
   <td>Butler</td>
   <td>Marketing Designer</td>
   <td>San Francisco</td>
   <td>47</td>
   <td>2009/12/09</td>
   <td>$85,675</td>
   <td>5384</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Howard</td>
   <td>Hatfield</td>
   <td>Office Manager</td>
   <td>San Francisco</td>
   <td>51</td>
   <td>2008/12/16</td>
   <td>$164,500</td>
   <td>7031</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Hope</td>
   <td>Fuentes</td>
   <td>Secretary</td>
   <td>San Francisco</td>
   <td>41</td>
   <td>2010/02/12</td>
   <td>$109,850</td>
   <td>6318</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Vivian</td>
   <td>Harrell</td>
   <td>Financial Controller</td>
   <td>San Francisco</td>
   <td>62</td>
   <td>2009/02/14</td>
   <td>$452,500</td>
   <td>9422</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Timothy</td>
   <td>Mooney</td>
   <td>Office Manager</td>
   <td>London</td>
   <td>37</td>
   <td>2008/12/11</td>
   <td>$136,200</td>
   <td>7580</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Jackson</td>
   <td>Bradshaw</td>
   <td>Director</td>
   <td>New York</td>
   <td>65</td>
   <td>2008/09/26</td>
   <td>$645,750</td>
   <td>1042</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Olivia</td>
   <td>Liang</td>
   <td>Support Engineer</td>
   <td>Singapore</td>
   <td>64</td>
   <td>2011/02/03</td>
   <td>$234,500</td>
   <td>2120</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Bruno</td>
   <td>Nash</td>
   <td>Software Engineer</td>
   <td>London</td>
   <td>38</td>
   <td>2011/05/03</td>
   <td>$163,500</td>
   <td>6222</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Sakura</td>
   <td>Yamamoto</td>
   <td>Support Engineer</td>
   <td>Tokyo</td>
   <td>37</td>
   <td>2009/08/19</td>
   <td>$139,575</td>
   <td>9383</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Thor</td>
   <td>Walton</td>
   <td>Developer</td>
   <td>New York</td>
   <td>61</td>
   <td>2013/08/11</td>
   <td>$98,540</td>
   <td>8327</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Finn</td>
   <td>Camacho</td>
   <td>Support Engineer</td>
   <td>San Francisco</td>
   <td>47</td>
   <td>2009/07/07</td>
   <td>$87,500</td>
   <td>2927</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Serge</td>
   <td>Baldwin</td>
   <td>Data Coordinator</td>
   <td>Singapore</td>
   <td>64</td>
   <td>2012/04/09</td>
   <td>$138,575</td>
   <td>8352</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Zenaida</td>
   <td>Frank</td>
   <td>Software Engineer</td>
   <td>New York</td>
   <td>63</td>
   <td>2010/01/04</td>
   <td>$125,250</td>
   <td>7439</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Zorita</td>
   <td>Serrano</td>
   <td>Software Engineer</td>
   <td>San Francisco</td>
   <td>56</td>
   <td>2012/06/01</td>
   <td>$115,000</td>
   <td>4389</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Jennifer</td>
   <td>Acosta</td>
   <td>Junior Javascript Developer</td>
   <td>Edinburgh</td>
   <td>43</td>
   <td>2013/02/01</td>
   <td>$75,650</td>
   <td>3431</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Cara</td>
   <td>Stevens</td>
   <td>Sales Assistant</td>
   <td>New York</td>
   <td>46</td>
   <td>2011/12/06</td>
   <td>$145,600</td>
   <td>3990</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Hermione</td>
   <td>Butler</td>
   <td>Regional Director</td>
   <td>London</td>
   <td>47</td>
   <td>2011/03/21</td>
   <td>$356,250</td>
   <td>1016</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Lael</td>
   <td>Greer</td>
   <td>Systems Administrator</td>
   <td>London</td>
   <td>21</td>
   <td>2009/02/27</td>
   <td>$103,500</td>
   <td>6733</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Jonas</td>
   <td>Alexander</td>
   <td>Developer</td>
   <td>San Francisco</td>
   <td>30</td>
   <td>2010/07/14</td>
   <td>$86,500</td>
   <td>8196</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Shad</td>
   <td>Decker</td>
   <td>Regional Director</td>
   <td>Edinburgh</td>
   <td>51</td>
   <td>2008/11/13</td>
   <td>$183,000</td>
   <td>6373</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Michael</td>
   <td>Bruce</td>
   <td>Javascript Developer</td>
   <td>Singapore</td>
   <td>29</td>
   <td>2011/06/27</td>
   <td>$183,000</td>
   <td>5384</td>
   <td>[e-mail]</td>
  </tr>
  <tr>
   <td>Donna</td>
   <td>Snider</td>
   <td>Customer Support</td>
   <td>New York</td>
   <td>27</td>
   <td>2011/01/25</td>
   <td>$112,000</td>
   <td>4226</td>
   <td>[e-mail]</td>
  </tr>
 </tbody>
 
</table>

- Nikesh Kumar

Answer 3

这里提供了在数据表中进行单列搜索的解决方案。 同时，它还可以使用正则表达式进行多行值搜索：

$('#' + tableId + ' thead tr').clone(true).appendTo('#' + tableId + ' thead');
    $('#' + tableId + ' thead tr:eq(1) th').each(function (i) { // Creating Clone Header for Filter TextBox
        var title = $(this).text();
        if (excludeTitle.indexOf(title.trim()) == -1) { // check table column header to add filter textBox
            $(this).html('<input type="text" id="col' + i + '_filter" class="ClearFilters" placeholder="Search ' + title + '" />');
            $('input', this).on('keyup change', function () {
                if (table.column(i).search() !== this.value) { 
  var sp1 = this.value;
 var regex_check = null;
try { regex_check = new RegExp(sp1);}
  catch (error) { alert('Search parameter is not in correct format.'); return false; }
                    table.column(i).search(sp1, true).draw();
                }
            });
        }
        else {
            $(this).html('');
        }
    });

- satya prakash

Answer 4

你可以尝试使用这个DataTables插件，看起来它很适合你的需求，虽然界面与你所要求的有些不同。

- user3307073

Answer 5

// Setup - add a text input to each footer cell
$('#example thead 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.header() ).on( 'keyup change clear', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );

- Sourav Purkait

---

抱歉，您的代码片段无法运行。也许您忘记引用jQuery了？ - Sagnalrac

Answer 6

$(document).ready(function() {
// Setup - add a text input to each footer cell

 var table = $('#example').DataTable( {
    orderCellsTop: true,
    fixedHeader: true
} );;


$("#example thead tr td").each( function ( i ) {
    var select = $('<select><option value=""></option></select>')
        .appendTo( $(this).empty() )
        .on( 'change', function () {
            table.column( i )
                .search( $(this).val() )
                .draw();
        } );

    table.column( i ).data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
    } );
});

} );

- Jagan Nath

---

请问您能否解释一下这个回答如何回答了问题？ - Yves Gurcan

Answer 7

在你的代码中使用 this.header() 而不是 this.footer()，就像这样：

$( 'input', this.header() ).on( 'keyup change', function () {

        // your code
});

希望它能对你有用。

- SAGAR RADADIYA

Answer 8

根据其他两个解决方案，我想要添加更多的额外内容。 您可以隐藏某些列的搜索框。

const searchBoxHide = ['Start date', 'Position'];

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

- Atul Baldaniya