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行中。如果我删除第二个，那么我的数据表是完全响应的，意味着我可以看到第一列的+符号被隐藏的列。

我如何才能使搜索框响应？

Answer 1

<强>原因

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

<强>解

在一个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>

备注

您的代码还有其他问题：

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选项使用顶部标题行进行排序。

<强>样本

请参阅this jsFiddle以获取代码和演示。

Answer 2

带有

的响应列

className="none"

来自Gyrocode.com 更新的演示：jsFiddle

在表顶部的专栏搜索与敏感桌

2 个答案: