colsVisibility and popup_filters

[PTuruz]

Describe the bug In colsVisibility columns names shown incorrect

Reproduction steps: Steps to reproduce the behavior:

1. popup_filters: true
2. extensions:[ { name: 'sort' } , { name: 'colsVisibility', text: 'Toggle Columns', enable_tick_all: true, btn_target_id: 'colsBtn' } , { name: 'filtersVisibility', target_id: 'fltsBtn' }

Expected behavior Popup Filter works correctly Toggle Columns (colsVisibility) works correctly Observed behavior: In. Toggle Columns (colsVisibility) list i see not correct names of columns

Screenshots

Additional information/context: full code in here

 <script type='text/javascript'>
                var tfConfig = 
                {
                    base_path: 'tablefilter/dist/tablefilter/',
                    col_0: 'none',
                    col_1: 'checklist',
                    col_2: 'checklist',
                    col_3: 'checklist',
                    col_6: 'none',

                    rows_counter: 
                    {
                        text: 'Տողեր: '
                    },
                    btn_reset: 
                    {
                        text: 'Մաքրել'
                    },

                    themes: [{ name: 'skyblue' }],
                    paging: {
                        results_per_page: ['Քանակ: ', [10,25,50,100]]
                    },
                    popup_filters: true,
                    auto_filter: {
                        delay: 500 //milliseconds
                    },
                    extensions:[
                        {
                            name: 'sort'
                        }, 
                        {
                            name: 'colsVisibility',
                            text: 'Թաքցնել սյունակները:',
                            enable_tick_all: true,
                            btn_target_id: 'colsBtn'
                        }
                        /*                        , 
                        {
                            name: 'filtersVisibility',
                            target_id: 'fltsBtn',
                            visible_at_start: true
                        }
                        */

                    ],
                    sticky_headers: true,
                };
                var tf = new TableFilter('data-types', tfConfig);
                tf.init();
            </script>

[goplanidhiraj]

Cols Visibility doesn't seem to work with 'popup_filters: true,' property. This property adds an additional div in 'th' tag at the start which is causing the problem for ColsVisibility to properly map column name into the dropdown.

[PTuruz]

So as i understand there is no way use both properties

[goplanidhiraj]

I am not an expert in Javascript and Jquery but have implement a workaround for this issue. Have manually replaced value of Checkboxes with correct values. Also, please share if you can think of any better way of implementing a resolution.

1. Created my table headers as follows: `

   Actions

                                       <th name="SO Date">SO Date</th>
                                       <th name="S0 #">SO #</th>....</tr>`

2. Defined columns visibility extension as follows: extensions: [{ name: 'sort' }, { name: 'colsVisibility', src: ['TableFilter/TFExt_ColsVisibility/TFExt_ColsVisibility.js'], text: 'Display Columns: ', enable_tick_all: true, btn_target_id: 'divdisplaycolumns', on_loaded: function (o) { setTimeout(rectifyColSel, 500); //Setting a delay of 500 milliseconds as for reason unknown html is not fully generated here and many a times get the objects blank } }],

3. Finally defined 'rectifyColSel' function as: function rectifyColSel() { var idex = 0; $('.cols_checklist').children('li').each(function () { var curLi = $(this); //if condition to ignore 'Select All' option if (idex != 0) { var curth = $('#trheader').find('th').eq(idex - 1); var curlbl = $(curLi).find('input[type="checkbox"]').eq(0); $(curlbl).val($(curth).attr('name')); $(curLi).html($(curlbl)); $(curLi).append($(curth).attr('name')); } $(curLi).css('color', '#000'); idex = idex + 1; }); }

Please mark this as "Answer" if it helps.

[koalyptus]

@PTuruz, @goplanidhiraj, tx for submitting the bug and try to figure out a solution. I confirm this is a bug, the columns visibility extension gets confused on how to retrieve the headers text when there is a pop-up filter in same cell. However, note you can manually override the column names with the headers_text setting: https://github.com/koalyptus/TableFilter/wiki/3.4-Columns-visibility

Also check this demo out to see it in action: https://codepen.io/koalyptus/pen/oKXdMP

[PTuruz]

@koalyptus , Thanks for answer, I check headers_text and for me this issue work fine so i close a ticket