javascript - 具有列搜索的 DataTable 不可折叠

Question

我正在使用来自：https : //datatables.net/ 的数据表我的数据表有列搜索，所以当我调整窗口大小时，我的列搜索字段不会折叠，它们会消失。

如果没有列搜索，它可以正常工作，但是当我添加列搜索代码时，我遇到了响应问题。

我的 HTML 文件：

<div class="table-responsive">
            <table class="table table-bordered collapsed table-hover" id="wo-list">
                <thead class="thead-light">
                    <tr>
                        <th class="font-weight-bold">#</th>
                        <th class="font-weight-bold">Created</th>
                        <th class="font-weight-bold">Scheduled</th>
                        <th class="font-weight-bold">Status</th>
                        <th class="font-weight-bold">Tech/Schedule</th>
                        <th class="font-weight-bold">Property</th>
                        <th class="font-weight-bold">Address</th>
                        <th class="font-weight-bold">Caller</th>
                        <th class="font-weight-bold">Phone</th>
                        <th class="font-weight-bold">Unit</th>
                        <th class="font-weight-bold">Call Reason</th>
                        <th class="font-weight-bold">Bill Est</th>
                        <th class="font-weight-bold">PO</th>

                    </tr>  
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

我的脚本文件：

$(document).ready(function() {
    
    $('#wo-list thead tr').clone(true).addClass('filters').appendTo( 
    '#wo-list thead' );
    
    var table = $('#wo-list').DataTable({
            responsive: true,
            lengthMenu: [5, 10, 25, 50],
            // deferLoading: 57,
            orderCellsTop: true,
            fixedHeader: true,
            pageLength: 50,
            ordering: false,
            processing: true,
            serverSide: true,
            searching: true,
            ajax: {
                url: "{{ route('workorders.listing') }}",
                type: 'GET',
                data: function (d) {
                    d.wostatus = $('.wo_status').val();
                    d.schd_status = $('.schd_status').val();
                    d.created_date_range = $('.created_date').val();
                    d.technician = $('.wo_technician').val();
                },
            },
columns: [
            {
                data: 'workorder_id',
                name: 'vt_workorders.workorder_id'
            },
            {
                data: 'created_at',
                name: 'vt_workorders.created_at',
                width: 100
            },
            {
                data: 'scheduled_status',
                name: 'vt_workorders.scheduled_status'
            },
            {
                data: 'status',
                name: 'vt_workorders.status'
            },
            {
                data: 'tech_name',
                name: 'vt_properties.property_name',
                searchable : false,
                width: 180
            },
            {
                data: 'property_name',
                name: 'vt_properties.property_name'
            },
            {
                data: 'address',
                name: 'vt_properties.address'
            },

            {
                data: 'caller',
                name: 'vt_workorders.caller'
            },
            {
                data: 'call_phone',
                name: 'vt_workorders.call_phone'
            },
            {
                data: 'unit_name',
                name: 'vt_units.unit_name'
            },
            {
                data: 'call_reason',
                name: 'vt_workorders.call_reason'
            },
            // {
            //     data: 'revisions',
            //     name: 'revisions',
            //     searchable : false,
            //     width: 180,
            // },
            {
                data: 'estimate_bill',
                name: 'vt_workorders.estimate_bill',
            },
            {
                data: 'PO',
                name: 'PO',
                // responsivePriority: -1
            },
        ],
            order: [
                [0, 'desc']
            ]
        });
    
       
    
        });
    }); 

标签： javascriptjquerycsslaraveldatatable