Блог

Я добавил его <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>
  

Когда я добавил нижний колонтитул в таблицу для поиска по столбцу, размер таблицы изменился, он в два раза больше и не принимает никакого стиля.

Может кто-нибудь объяснить, почему это происходит, спасибо!

На 4 вопроса, которые я задал в stavkoverflow, на все 4 из них я ответил сам себе…

В любом случае, кто борется с этим, просто добавьте это в свой css:

 tfoot input {
  width: 100%;
}
  

Счастливого кодирования!