jQuery的数据表列过滤器头响应

THEAD第二排柱滤波器的设计并没有在响应窗口的工作，我想隐藏像THEAD第一排

THEAD第一行是标题 THEAD第二排是过滤器

我的代码如下

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
     <meta name="viewport" content="width=device-width,initial-scale=1"> 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css"> 
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">  
     <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> 
     <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
     <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> 
     <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script> 
     <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      // Setup - add a text input to each footer cell 
      $('#example .filters td').each(function() { 
       var title = $('#example thead th').eq($(this).index()).text(); 
       $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
      }); 

      // DataTable 
       var table = $('#example').DataTable({ 
        responsive: true 
       }); 

      // Apply the search 
      table.columns().eq(0).each(function (colIdx) { 
       $('input', $('.filters td')[colIdx]).on('keyup change', function() { 
        table 
         .column(colIdx) 
         .search(this.value) 
         .draw(); 
       }); 
      }); 
     }); 

     </script> 
     <style> 
     .filters input { 
      width: 100%; 
      padding: 3px; 
      box-sizing: border-box; 
     } 
     </style> 
    </head> 
<body> 
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0"> 
     <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> 
     <thead class="filters"> 
      <tr> 
       <td>First name</td> 
       <td>Last name</td> 
       <td>Position</td> 
       <td>Office</td> 
       <td>Age</td> 
       <td>Start date</td> 
       <td>Salary</td> 
       <td>Extn.</td> 
       <td>E-mail</td> 
      </tr> 
     </thead> 
     <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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

第一排的设计在响应第二排设计工作正常不工作要隐藏的列过滤器，如第1行

来源

2017-04-26 mohan raj

复杂的头不与响应插件2.0和2.1，看到this answer的支持更多细节。

解决方法可能是回滚到版本1.0，直到作者发布修补程序。

您的HTML标记不正确，您应该对每一列使用单个thead,tr，对于每一列使用th。

查看corrected example的代码和演示。

来源

2017-04-26 11:41:25

感谢您的回答，它对我很好。 –

jQuery的数据表列过滤器头响应

回答

相关问题