Datatable colVis display wrong selection value when using yadcf

Muhammad Izzat

Hello everyone, I'm using yadcf to filter my column my dataTable but for some reason its messing up with my colVis button, I have 2 dataTable in my html page, when a row is selected in the first table it will populate the second table using REST API, On load the colVis option is perfectly fine :

    <ul class="dt-button-collection dropdown-menu" role="menu" style="top: 139px; left: 492.875px;">
        <li class="active"><a href="#">ID</a></li>
        <li ><a href="#">Preview</a></li>
        <li class="active"><a href="#">Task</a></li>
        <li><a href="#">Description</a></li>
        <li class="active"><a href="#">Priority</a></li>
    </ul>

but when I select another row it'll repopulate and any active field will have my row value in it, example :

    <ul class="dt-button-collection dropdown-menu" role="menu" style="top: 139px; left: 492.875px;">
        <li class="active"><a href="#">IDSelect valuex</a></li>
        <li ><a href="#">Preview</a></li>
        <li class="active"><a href="#">TaskSelect valuex</a></li>
        <li><a href="#">Description</a></li>
        <li class="active"><a href="#">PrioritySelect valuex</a></li>
    </ul>

even worst it'll display all the value in my table into it. can anyone tell me how to fix this. any help is much appreciated.

Below is my code :

var workorder_table = $('#workorder_table').dataTable({
            dom: 'Blfrtip',
            JQueryUI: true,
            bPaginate: false,
            sScrollX: "100%",
            sScrollY: '180vh',
            scrollCollapse: true,
            destroy: true,
            paging: false,
            columnDefs: [
                {"searchable": false, width: 1, targets: 0},
                {width: 1, targets: 1},
                {width: 2, targets: 2},
                {width: 2, targets: 3},
                {width: 2, targets: 4},
                {width: 2, targets: 5},
                {width: 3, targets: 6},
                {width: 2, targets: 7}
            ],
            responsive: false,
            select: true,
            buttons: getDataTableButtons(),
            ajax: {
                url: workorder_path,
                dataSrc: ''
            },
            columns: [
                {"data": "id", "class": "workorder_id id_padding-right "},
                {
                    "data": "thumb", "class": "", "visible": false, "render": function (data, type, row) {
                    return `<a href=` + data + ` data-fancybox> <img onerror="this.src='/media/dashboard/default/photo.png'" src=` + data + ` width="80" height="45"> </a>`;
                }
                },
                {"data": "task.name", "class": "task_name",},
                {"data": "description", "class": "", "visible": false},
                {"data": "priority", "class": "", "visible": true},
                {
                    "data": "status", "class": "v-a-m ", "render": function (status, type, row) {
                    return `<div class="media media-auto">
                                                                    <div class="media-left">
                                                                        <div class="avatar">
                                                                            <img class="media-object img-circle status-icon-size"
                                                                                 src=${ status.image }
                                                                                 alt=${ status.name }
                                                                                 title=${ status.name }>
                                                                        </div>
                                                                    </div>
                                                                   <div class="media-body">
                                                                        <span class="media-heading">${ status.name }</span>
                                                                    </div>
                                                                </div>`;
                }
                },
                {"data": "start_date", "class": "", "visible": true},
                {"data": "duration", "class": "", "visible": true},
                {
                    "data": "assign_to",
                    "class": "assign_to_padding-right ",
                    "defaultContent": "None",
                     "width": "400px",
                    "render": function (assign_to, type, row) {
    
                        if ((assign_to == null) || (assign_to == 'None')) {
                            return
                        }
                        else {
                            return `<div class="media media-auto">
                                                                <div class="media-left">
                                                                    <div class="avatar">
                                                                        <img class="media-object img-circle"
                                                                             src=${ assign_to.photo }
                                                                             alt=${ assign_to.official_name }>
                                                                    </div>
                                                                </div>
                                                                <div class="media-body">
                                                                    <span class="media-heading">${ assign_to.official_name }</span>
                                                                    <br>
                                                                    <span class="designation">${ assign_to.designation.designation }</span>
                                                                </div>
                                                            </div>`
                        }
    
                    }
                },
                {"data": "creation_time", "class": "", "visible": false},
                {"data": "modified_time", "class": "", "visible": false},
                {"data": "parent_project_content.id", "class": "content_id ", "visible": false}
            ]
        }).yadcf([{column_number : 2},
                  {column_number : 3},
                  {column_number : 4},
                  {column_number : 5},
                  {column_number : 6},
                  {column_number : 7},
                  {column_number : 8}]);

Muhammad Izzat

I figure out the issue is because the select filter is placed in the header of the table therefore everything in it is listed in the colVis selection, how can I move the position of the filter to the first row