带有页脚的jQuery DataTable没有响应

Posted 2023-05-07

【中文标题】带有页脚的jQuery DataTable没有响应

【英文标题】：jQuery DataTable with footer not Responsive

【发布时间】：2016-08-28 06:57:43

【问题描述】：

当我在表中添加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();
    );
);

【参考方案1】：

尝试使输入变成液体：

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