添加按列搜索的数据表会更改表的大小答案

【问题标题】：Datatables adding search by column changes the size of table添加按列搜索的数据表会更改表的大小
【发布时间】：2021-02-25 07:50:00
【问题描述】：

我在桌子上添加了<tfoot>，桌子比以前大了 2 倍：

<div class="container">
        <table class="table table-bordered" id="users-table" style="white-space: nowrap; margin: auto;">
            <thead class="table-primary">
                <tr>
                    <th>First Name</th>
                    <th>Verified Status</th>
                    <th>User Type</th>
                    <th>Birthdate</th>
                    <th>Email</th>
                    <th>Fiscal ID</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tfoot class="table-info">
                <tr>
                    <th>First Name</th>
                    <th>Verified Status</th>
                    <th>User Type</th>
                    <th>Birthdate</th>
                    <th>Email</th>
                    <th>Fiscal ID</th>
                </tr>
            </tfoot>
        </table>
    </div>

这是数据表的脚本：

<script>
$(function() {
    $('#users-table').DataTable({
        processing: false,
        serverSide: true,
        columnDefs: [
        {"className": "dt-center", "targets": "_all"}
        ],
        ajax: '{{ route('admin.users-data') }}',
        columns: [
            { data: 'user', name: 'user' },
            { data: 'email_verified_at', name: 'users.email_verified_at', 
                render: function( data, type, full, meta ) {
                    if (data == null) {
                      return "<img class=\"\" src=\"{{ asset('images/icons/no.png')}}\" style=\"width:20%\"/>";
                    } else {
                      return "<img class=\"\" src=\"{{ asset('images/icons/yes.png')}}\" style=\"width:20%\"/>";
                    }
                    
                  
                }
            },
            { data: 'role', name: 'roles.role' },
            { data: 'birthdate', name: 'birthdate' },
            { data: 'email', name: 'email' },
            { data: 'fiscal_id', name: 'fiscal_id' },
            { data: 'action', name: 'action', orderable: false, searchable:false }
        ],
        initComplete: function () {
            this.api().columns().every(function () {
                var column = this;
                var input = document.createElement("input");
                $(input).appendTo($(column.footer()).empty())
                .on('change', function () {
                    column.search($(this).val(), false, false, true).draw();
                });
            });
        }
    });
});
</script>

当我在表格上添加页脚以按列搜索时，表格的大小发生了变化，它变大了两倍，并且它不接受任何样式。

谁能解释一下为什么会这样，谢谢！

【问题讨论】：

标签： laravel search filter datatable datatables

【解决方案1】：

在我在 stavkoverflow 中提出的 4 个问题中，我回答了自己所有的 4 个问题......

无论如何，谁正在为此苦苦挣扎，只需将其添加到您的 css 中：

tfoot input {
  width: 100%;
}

编码愉快！

【讨论】：