Datatable with column search is not collapsabl


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.