BS5 Floating Labels: my solution

dariov

I have been working on using floating labels with Datatables. After testing different approaches i came out with this solution:

https://live.datatables.net/hutehubu/4/edit

has anyone tried a different approach? Atm the only thing i don't like is that the style changes after inizialization so the user will first see the traditional styling.

@allan any suggestions?

kthorngren

Neat solution. I'm guessing you are using ajax which delays the initComplete causing the quick blip between style changes. The only option I can think of is to hide the div container the Datatable is in then, using something like jQuery show(), display the div after the style changes. Like this example with the added ajax option:
https://live.datatables.net/hutehubu/5/edit

Kevin

dariov

@kthorngren sometimes i feel really stupid LOL , that was easier then i thought.

Anyway it would be nice to have floating labels implemented in datatables and maybe activate them using an option like floatingLabels: true

kthorngren

Yes, the easy answer is not always obvious I've seen questions like this asked many times. It would be a neat option. @allan can comment on the likelihood of implement it.

Kevin

dariov

@kthorngren is there a way to set initComplete globally so i don't have to call the addFloatingLabelsToDatatable function on each table?

For example...in my main.js file i have this configuration

//DataTables Global Options $.extend(true, $.fn.dataTable.defaults, { conditionalPaging: true, processing: true, language: dmConfig.company_settings.default_language === 'it' ? datatablesLang_it : datatablesLang_en, responsive: { details: { type: 'column', target: 0 } } });

maybe using something like

$('body').on('init.dt', function () { })

but how can i pass the istance to retrive the container ?

kthorngren

The options docs show how to setup default options for the page.

Kevin

kthorngren

$('body').on('init.dt', function () { })

Possibly that would work, I haven't tried it though.

Kevin

dariov

@kthorngren it seems to work

https://live.datatables.net/hutehubu/7/edit

allan

That looks really nice!

I don't currently have any plans to integrate support for Bootstrap 5's floating labels directly into the Bootstrap 5 integration for DataTables - however, this might be a good candidate for the new feature plug-ins in DataTables 2. A searchFloatingLabel feature could be registered for example - it would create the required markup and attach a listener to an input element that then calls search() as needed.

Allan

dariov

hello @allan i will give it a try in the weekend glad to help

dariov

hello @allan i came up with this solution:

https://live.datatables.net/hutehubu/17/edit

but i'm not sure about this:

$('#'+settings.sTableId).dataTable().api().search(searchInput.value).draw();

i would like to know if this is approach is fine in your opinion

allan

That's looking great!

To get an API instance though, I would suggest:

let dt = new DataTable.Api(settings);

then you aren't using any of the private parameters.

Here is a little update showing that: https://live.datatables.net/hutehubu/18/edit .

Allan

dariov

Hello @allan here is the plugin:
https://live.datatables.net/hutehubu/18/edit

i think it works fine, maybe check the code. I used settings.aLengthMenu to get the avelable options...is there any other way?

allan

Yeah, I reckon that looks great!

Its a good point about access to the values to be shown. I don't think there is a way to do it other than settings.aLengthMenu at the moment. If it were set in the initialisation object you could use init(), but that doesn't get a default value.

I'll have a think about some kind of public API for that.

Allan

dariov

@allan thanks if you want you can share it with the community

allan

Thank you! It might be a good one to wrap up into a plug-in. I'm going to try and make some time to work on the plug-ins in a little while, and will circle back to this when I do that.

Allan