Question

我想使用Gyrocode (see SO link)在数据表中过滤列的优秀示例。但是，我希望列过滤器成为固定标头的一部分。我已将scrollY：＆＃39; 50vh＆＃39;添加到数据表配置中，这可以很好地修复列过滤器。问题是，现在列过滤器不起作用，我有限的jQuery知识让我感到难过！有任何想法吗？ https://jsfiddle.net/zaoz5419/

<script src='https://code.jquery.com/jquery-1.11.0.js'></script>
<script src='https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css'></script>
<script src='https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js'></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
</tfoot>
<tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
<!-- see fiddle for extended list -->
</tbody>

}）;

$(document).ready( function () { 
// Setup - add a text input to each header cell
$('#example thead tr:eq(1) th').each( function () {
    var title = $('#example thead tr:eq(0) th').eq( $(this).index() ).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} ); 

var table = $('#example').DataTable({
    orderCellsTop: true,
    scrollY: '50vh',
    scrollCollapse: true,
});

// Apply the search
table.columns().every(function (index) {
    $('#example thead tr:eq(1) th:eq(' + index + ') input').on('keyup change', function () {
        table.column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();
    });
  });
});

Answer 1

应用搜索时，问题出在您的选择器上。不知何故，当创建数据表时，它没有id example。如果你按照以下方式更改选择器就可以了。我不确定你打电话给datatable时为什么会丢失id。：

// Apply the search
table.columns().every(function (index) {
    $('.dataTable thead tr:eq(1) th:eq(' + index + ') input').on('keyup change', function () {
        table.column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();
    });
});

Here is a fiddle

jQuery数据表中的列过滤器无法在固定标头中工作

1 个答案: