BS5 Floating Labels: my solution
BS5 Floating Labels: my solution
dariov
Posts: 25Questions: 4Answers: 0
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?
This discussion has been closed.
Replies
Neat solution. I'm guessing you are using
ajaxwhich delays theinitCompletecausing the quick blip between style changes. The only option I can think of is to hide thedivcontainer the Datatable is in then, using something like jQuery show(), display thedivafter the style changes. Like this example with the addedajaxoption:https://live.datatables.net/hutehubu/5/edit
Kevin
@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
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
@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 ?
The options docs show how to setup default options for the page.
Kevin
Possibly that would work, I haven't tried it though.
Kevin
@kthorngren it seems to work
https://live.datatables.net/hutehubu/7/edit
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
searchFloatingLabelfeature could be registered for example - it would create the required markup and attach a listener to aninputelement that then callssearch()as needed.Allan
hello @allan i will give it a try in the weekend
glad to help
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
That's looking great!
To get an API instance though, I would suggest:
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
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?
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.aLengthMenuat the moment. If it were set in the initialisation object you could useinit(), but that doesn't get a default value.I'll have a think about some kind of public API for that.
Allan
@allan thanks if you want you can share it with the community
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