DataTable with column search is not collapsible


I am using Datatables from : https://datatables.net/
My Datatable has column search, so when i resize the window, my column search field dont collpased, they go out.
enter image description here

Without Column search it works fine but when i add column search code, i got the responsiveness issue.

My Html file :

<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>

My Script file:

$(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']
            ]
        });
    
       
    
        });
    }); 

Source: CSS – Stack Overflow

September 2, 2021
Category : News
Tags: css | datatable | javascript | jquery | laravel

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.