在具有响应表的表顶部进行列搜索

Column search on top of table with responsive table

本文关键字：搜索 顶部 响应      更新时间：2023-09-26

我已经用服务器端脚本为列搜索准备了表，一切都很好，但有一个问题是响应表，下面是我的桌子，

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

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

如何使搜索框也能响应？

原因

您有两个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选项可以使用顶部标题行进行排序

演示

有关代码和演示，请参阅此jsFiddle。

具有的响应列

className="none"

来自Gyrocode.com更新演示：jsFiddle

相关文章：