带有页脚的 jQuery DataTable 不响应

Question

当我在表格中添加 tfoot 时，表格不响应？

我已经按照这个例子 https://datatables.net/examples/api/multi_filter.html

当我的页脚仅包含文本时，则为响应式，但当页脚中输入输入时，则为响应式

HTML:

<div class="row">
<div class="col-sm-12">
    <h2>Persons</h2>
</div>
<div class="col-sm-12">
<table id="tblPersons" class="table display table-hover table-striped userTables" >
<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Telephone</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Telephone</th>
    </tr>
</tfoot>
<tbody>

JS:

$('#tblPersons thead th').each( function () {
    var title = $('#tblPersons tfoot th').eq($(this).index()).text();
    $(this).html('<input type="text" class="form-control" placeholder="Search '+title+'" />');
});

var table=$("#tblPersons").DataTable({
    bSort:true,
    bPaginate:true,
    bFilter:true,
    bInfo:false,
    //"bLengthChange": false,
    responsive:true
});

table.columns().eq(0).each( function ( colIdx ) {
    $( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
        table.column( colIdx ).search( this.value ).draw();
    });

    $('input', table.column(colIdx).header()).on('click', function(e) {
        e.stopPropagation();
    });
});

Answer 1

尝试使输入变得流动:

#tblPersons input {
    width: 100%;        
    box-sizing: border-box;
}