hiding one column after filter

hiding one column after filter

simaRasimaRa Posts: 6Questions: 3Answers: 0

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

Answers

  • colincolin Posts: 4,323Questions: 0Answers: 769

    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

  • simaRasimaRa Posts: 6Questions: 3Answers: 0

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

  • simaRasimaRa Posts: 6Questions: 3Answers: 0

    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>')
                        });
                    });
                }
            });
    
  • colincolin Posts: 4,323Questions: 0Answers: 769

    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

Sign In or Register to comment.