Column Visibility Bug

[nooglersoon]

I found some weird things when I implement the 'colvis' function (column visibility) to the buttons. When I click on one of the columns in the column menu to hide, the selected column data is successfully hidden, however, the column headers are still there and even duplicated.

[GrayTable]

Did you found a fix for this issue by any chance?

[nooglersoon]

No, I didn't. I haven't found any solution for this problem

[morlandi]

Dear @nooglersoon , I wasn't aware of the 'colvis' button capability of Datatables.

More generally, I never use the "buttons" plugin, since when column filtering is not enough I opt to add an external sidebar as explained here:

1.8 Add a sidebar with custom filters

Sooner or later, I'll check it. I leave this Issue open for future investigations

Many thanks, Mario

[nooglersoon]

Thanks for your response.

Can we custom the sidebar interface using css framework (bootstrap or tailwindss)?

[morlandi]

Sure. By the way, the example I gave happens to use bootstrap. As long as you can collect the selected values via javascript, the layout is irrelevant

[nooglersoon]

I see. okay thanks!

[nooglersoon]

Hi! I have an issue. How to insert row number in table, but not associated to primary key? So the row number will be updated (if there are new or deleted data)

[M0l42]

Hi, Sorry to reopen this, I'm not used to collaborate with others like that...

I created a modal to show and hide columns, I'm not sure but I think colVis is not used anymore but I used the API method of datatables.js "column().visible()" and I ran into the same problem.

It is not really caused my django-ajax-datatable per say but from the datatable.js. in the function "_fnScrollDraw". The problem is when it's trying to recalculate the columns width of all the rows, he can't find some columns in the settings.aoColumns list and crash when trying to access its width.

So I modified this part :

$.each( _fnGetUniqueThs( settings, headerCopy ), function ( i, el ) {
    idx = _fnVisibleToColumnIndex( settings, i );
    el.style.width = settings.aoColumns[idx].sWidth;
} );

To this :

$.each( _fnGetUniqueThs( settings, headerCopy ), function ( i, el ) {
    idx = _fnVisibleToColumnIndex( settings, i );
    if (typeof settings.aoColumns[idx] !== "undefined") el.style.width = settings.aoColumns[idx].sWidth;
} );

To me it was enough to not have the double header when trying to hide a columns.

But I ran into a second problem which is the column filter doesn't hide when hiding the columns, after a while I end up with this solution that was good for me :

const headerFilter = $(".datatable-column-filter-row");

// Since it's from a modal with switch, I have the column index from the onSwitchChange, but I'm sure you can do something similar with buttons
let columnIdx = $(this).data('column');

let column = table_object.DataTable().column(columnIdx).visible(state);

let filter = headerFilter.find(`th:has(select[data-index=${columnIdx}], input[data-index=${columnIdx}], div[data-index=${columnIdx}])`);

if (state) {
      filter.show();
} else {
      filter.hide();
}

column.visible(state);

I did need to change something in the utils of ajax_datatable :

In the function "_setup_column_filters", when there's no filters, instead of being just an empty div, I made an empty div with its data-index, so I can hide it as well when I hide the column.

So in the function, I change this :

else {
     filter_row += "<th></i>&nbsp;</th>";
}

To this :

else {
     filter_row += "<th></i><div data-index='" + index + "'></div></th>";
}

Hope it can help :sweat_smile:

[morlandi]

Thank you @M0l42 .. seems quite reasonable to me 👍