Disabled entire Datatable.

phpMick

Hi,

I have a few Datatables on a page. Above each one is a checkbox. If the checkbox is not selected, I would like the Datatable to look disabled and the user should not be able to interact with it.

Is there a simple way to do this?

Thanks,

Mick

allan

Not really while the table is still a DataTable - there isn't a disable() method at the top level of the DataTables API.

The easiest workaround I can think of would be to put a position:absolute element over the top of the DataTable which would effectively catch all user mouse interaction.

Allan

phpMick

I was thinking of maybe changing the opacity and disabling row selection (table is not editable anyway).

Mick

colin

Hi @phpMick ,

The opacity would be easy to do, the problem would be with the table - you could still order, search, page change, etc. You could, potentially, remove the event handlers for those actions, and then re-initialise the table again when the checkbox is ticked - might be something to experiment with maybe.

Cheers,

Colin

phpMick

I think I'm just going to show and hide it for now, it is embedded in a bootstrap panel and this seems to work OK.

I think @allan has the best idea, but I'm not sure how to do it.

phpMick

Changed my mind again, adding this seems to work OK:

.disabled {
    opacity: 0.5 !important;
    pointer-events: none;
}