javascript - 使用响应表在表顶部进行列搜索

Question

我已经准备好带有用于列搜索的服务器端脚本的表格，一切正常，但在响应式表格中遇到了一个问题， 下面是我的表格，

<table class="table table-striped table-bordered table-hover dt-responsive nowrap" width="100%" id="3table">
    <thead>
        <tr>
            <th> ID</th>
            <th>Number</th>
            <th>Number1</th>
            <th> Number2</th>
            <th>Plant</th>
            <th>Part</th>    
            <th>Description</th>
            <th>Quantity</th>
            <th>Date</th>
            <th>To</th>
            <th>Date3</th>
            <th>Transport</th>
            <th>Docket</th>        
        </tr>
    </thead>
    <thead>
        <tr>
            <td><input type="text" data-column="1"  class="form-control" placeholder="Search"></td>
            <td><input type="text" data-column="2"  class="form-control" placeholder="Search"></td>
            <td><input type="text" data-column="3"  class="form-control" placeholder="Search"></td>
            <td><input type="text" data-column="4"  class="form-control" placeholder="Search"></td>
            <td><input type="text" data-column="5"  class="form-control" placeholder="Search"></td>
            <td><input type="text" data-column="6"  class="form-control" placeholder="Search"></td>
            <td><input type="text" data-column="7"  class="form-control" placeholder="Search"></td>
            <td><input type="text" data-column="8"  class="form-control" placeholder="Search"></td>
            <td><input type="text" data-column="9"  class="form-control" placeholder="Search"></td>
            <td><input type="text" data-column="10"  class="form-control" placeholder="Search"></td>
            <td><input type="text" data-column="11"  class="form-control" placeholder="Search"></td>            
            <td><input type="text" data-column="12"  class="form-control" placeholder="Search"></td>
            </tr>
        </thead>
    <tbody> 
    </tbody>
</table>

我为搜索框保留了另一个，然后使用下面的 jquery 代码发送搜索值

// Apply the search

$('.form-control').on( 'keyup click', function () {   // for text boxes
    var i =$(this).attr('data-column');  // getting column index
    var v =$(this).val();  // getting search input value
    var table = $('#3table').DataTable();
    table.columns(i).search(v).draw();
});

现在，当我更改分辨率时，搜索框不会像其他列和行那样更改分辨率，所有搜索框都不会换行，而是仅显示在 1 行中。如果我删除 2nd ，那么我的数据表是完全响应的，这意味着我可以看到隐藏列的第一列的 + 符号。

我怎样才能让搜索框也响应？

Answer 1

CAUSE

你有两个 thead 元素，应该只有一个。

SOLUTION

将两个标题行合并到一个 thead 元素下。

<table class="table table-striped table-bordered table-hover dt-responsive nowrap" width="100%" id="3table">
    <thead>
        <tr>
            <th> ID</th>
            <th>Number</th>
            <th>Number1</th>
            <th> Number2</th>
            <th>Plant</th>
            <th>Part</th>    
            <th>Description</th>
            <th>Quantity</th>
            <th>Date</th>
            <th>To</th>
            <th>Date3</th>
            <th>Transport</th>
            <th>Docket</th>        
        </tr>
        <tr>
            <th><input type="text" data-column="1"  class="form-control" placeholder="Search"></th>
            <th><input type="text" data-column="2"  class="form-control" placeholder="Search"></th>
            <th><input type="text" data-column="3"  class="form-control" placeholder="Search"></th>
            <th><input type="text" data-column="4"  class="form-control" placeholder="Search"></th>
            <th><input type="text" data-column="5"  class="form-control" placeholder="Search"></th>
            <th><input type="text" data-column="6"  class="form-control" placeholder="Search"></th>
            <th><input type="text" data-column="7"  class="form-control" placeholder="Search"></th>
            <th><input type="text" data-column="8"  class="form-control" placeholder="Search"></th>
            <th><input type="text" data-column="9"  class="form-control" placeholder="Search"></th>
            <th><input type="text" data-column="10"  class="form-control" placeholder="Search"></th>
            <th><input type="text" data-column="11"  class="form-control" placeholder="Search"></th>            
            <th><input type="text" data-column="12"  class="form-control" placeholder="Search"></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

NOTES

您的代码还有其他问题:

• ID 不应该以数字开头，考虑给你的表另一个 ID

• 您的搜索框代码应更改为:

  // Prevent sorting when search boxes are clicked
  $('#3table thead').on( 'click', '.form-control', function (e) {   // for text boxes
     e.stopPropagation();
  });
  
  // Perform column search
  $('#3table thead').on( 'keyup change', '.form-control', function (e) {          
     var i = $(this).attr('data-column');  // getting column index
     var v = $(this).val();  // getting search input value
     var table = $('#3table').DataTable();
     table.columns(i).search(v).draw();
  });   
  

• 使用 orderCellsTop: true 选项使用顶部标题行进行排序。

DEMO

参见 this jsFiddle用于代码和演示。