hiding one column after filter

simaRa

Hi
I have a problem with filtering per one column. After I filter, one of my columns is hidden and "control word_wrap" icon is displayed
I would appreciate your quick answer

colin

Hi @simaRa ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

simaRa

Hi Colin, thank you for your answer
when I click on status and change it, one column is hidden and blue icon is displayed

simaRa

let table = $('#tickets-table').DataTable({
//stateSave: true,
autoWidth: false,
responsive: {
details: {
type: 'column',
target: -1,
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
let data = row.data();
return 'Details: ';
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll()
}
},
fixedHeader: {
header: true,
footer: true
},
order: [[1, "desc"]],
processing: true,
serverSide: true,
ajax: "{{ route('ticket.data') }}",
pageLength: 25,
columnDefs: [
{responsivePriority: 1, targets: 0},
{responsivePriority: 2, targets: -2},
{responsivePriority: 3, targets: -3},
{
render: function (data, type, full, meta) {
return "

" + data + "

";
}
}
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {

                    // $(nRow).find('td:eq(9)').find('a').css('box-shadow',' 5px 5px 5px 5px #af87a1');
                if (aData.statusTitle == "Abandon") {
                    $('td', nRow).css('background-color', '#f7f0d2');
                }

                else if(aData.statusTitle == "Remit Step" && (aData.totalAmountSettled!='' ||aData.totalAmountSettled!='0')){

                    $('td', nRow).css('background-color', '#efc9e2');

                }
                else if(aData.statusTitle == "Remit Step" && (aData.totalAmountSettled=='' ||aData.totalAmountSettled=='0')){

                     $('td', nRow).css('background-color', '#e01e04');

                 }

                else if (aData.statusTitle == "Sale Step" ) {

                    $('td', nRow).css('background-color', '#cbedd0');
                }
                else if (aData.statusTitle == "Refund" ) {

                    $('td', nRow).css('background-color', '#dbdcdd');
                }
                else {
                    $('td', nRow).css('background-color', '#ffffff');
                }
                $('td', nRow).addClass('word_wrap');

            },
            columns: [
                {
                    className: 'details-control',
                    orderable: false,
                    searchable: false,
                    data: null,
                    defaultContent: ''
                },
                {data: 'id', name: 'tickets.id'},
                {data: 'customer_id', name: 'customer.customer_lastname'},
                // {data: 'swift_date_gregorian', name: 'tickets.swift_date_gregorian'},
                {data: 'account_owner_name', name: 'tickets.account_owner_name'},
                {data: 'account_id', name: 'account.account_alias'},
                {data: 'currency_id', name: 'currency.currency_abb'},
                {data: 'currency_amount', name: 'tickets.currency_amount'},
                {data: 'totalAmountSettled', name: 'tickets.totalAmountSettled'},
                {data: 'date_settled', name: 'tickets.date_settled'},
                {data: 'status', name: 'tickets.status', className: "all"},
                {data: 'updated_at', name: 'tickets.updated_at'},
                {data: 'action', name: 'action', orderable: false, searchable: false, className: "all"},
                {
                    data: null,
                    defaultContent: '',
                    className: 'control',
                    orderable: false,
                    searchable: false,
                    targets: -1
                },
            ],
            initComplete: function () {
                this.api().column('tickets.status:name').every(function () {
                    let column = this;
                    let select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            let val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column.search(val ? '^' + val + '$' : '', true, false).draw();
                        });

                    column.data().unique().sort().each(function (d, j) {

                        let item = strip(d).trim();
                        let items = item.split(" ");

                        select.append('<option value="' + items[0] + '">' + d + '</option>')
                    });
                });
            }
        });

colin

Hi @simaRa ,

That's a lot of code to look at. We're happy to take a look, but please link to a test case. Instructions on how are in first reply.

Cheers,

Colin