Page Len Selector Control - Styling
Page Len Selector Control - Styling
![IMTanuki](http://www.gravatar.com/avatar/7d256fd5810cd3ec5dae9501ff2186f1/?default=http%3A%2F%2Fvanillicon.com%2F7d256fd5810cd3ec5dae9501ff2186f1_200.png&rating=g&size=120)
Trying to format the page len selector control (similar to the way buttons are formatted).
environment:
- bootstrap 5.0.1
- jquery 3.6.0
- dt src d0wnloaded consolidated DT css and js files.
test case:
https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html
button formatting (using bootstrap classes)
buttons: [{
extend: "excel",
className: "btn-primary",
text: 'Save in Excel'
}]
questions / comments
1. Is there an equivalent capability to assign className to the page len selector option tags?
2. re pageLength button: since it's a button, am I correct that:
- I can't add a dropdown options list?
- I can't have 2 buttons in 2 different locations (via the dom "B" option)?
3. is there any way to add a bootstrap dropdown element to the table configuration?
TL;DR - I just need to configure the list of page len options so they look like the rest of my site...
Thx!
Answers
I don't see any other
select
elements on your page, unless I'm just missing it?Do you want it to look like a dropdown like this:
If so, use Buttons'
pageLength
button type.You can have the dropdown button as well as the
select
length input if you want.Not via the
dom
option you can't, but you can still have multiple button groups as shown in this example. You just need to insert them into the document yourself.See my first question above.
Allan
Thx so much! I'll give it a go!
Alan, I looked at your suggestion above.
Dropdown
Yes, I am trying to get a true dropdown.
form-select and option tags - issue
The problem with vanilla form-select and option tags is that (AFAIK), option tags cannot be customized (some kind of browser support issue). Adding css classes with override properties doesn;t seem to work.
From Bootstrap's Select page: Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations.
Workaround 01 - DT Buttons
While using the button type is a creative approach, it's a non-standard way of implementing a dropdown. TBH, it looks a bit awkward.
Workaround 02 - ul-li tags
Is there a way to use ul-li tags and hook the results back into the pagelen parameter? This is the most common way I've seen of getting around the <option> format limitations...
FWIW
Select2 provides an alternative vis a vis a jquery plugin (but I think it's overkill) - https://select2.org/dropdown
I almost have a solution:
issues
works perfect for all form factors except xs (mobile), which is where datatables' responsive mode kicks in.
Troubleshooting
- I tested the click event on different form factors from my desktop and it failed when I resized to a mobile device, so it's not an Android issue.
- I tried event delegation - the dropdown clicks work w/o event delegation, except on the mobile form factor.
Troubleshooting (cont)
vanilla dropdown click event works for:
- any form factor (mobile to desktop)
- windows and android
- local and hosted app
click event for a dropdown control embedded in datatable does not work for a mobile form factor under any circumstances.
I think there is a conflict with DT responsive function...
See if this thread helps.
Kevin
Kevin, thx for the link. In that scenario, he was trying to click on the table itself. In my case, I'm trying to click on a control, so I can use that same code.
But...I think it's possible that the control tags may be affected as well - interestingly, I'm using ul, li tags in my control. However, my event selector is by id, not tag or class...
IDK, I'm hoping Allan or Colin can provide some insights on this...
Thx!
As long as
$('#table-sandbox-pagelen-01')
picks up the element, then your method should work just fine. Perhaps you can link to your page showing the issue?Here is a little example of Bootstrap 5 with
pageLength
: http://live.datatables.net/cupodinu/1/edit . Is that not what you would expect it to look like?Allan
Alan,
The thread has gotten a bit long in the tooth - so, just to clarify - there are 2 issues:
- using button does not work - it relies on the form-select and option tags, which have a default format (i.e. blue bg) that cannot be changed (it's a browser issue, I think). the issue is styling - it looks odd having a control with a completely different style than the rest of my site.
- using a dropdown works from a styling perspective, but in mobile, the click event is not getting detected. Note that click events work fine outside of DT and it works fine outside of mobile.
I think there is a conflict somewhere ...
1) The background colour in that example is coming from this style in the Bootstrap stylesheet:
You could modify the style if you need (I'm a little surprised it isn't using a Bootstrap CSS variable, but I haven't dug into their code to find out why not).
2) That's odd - The dropdown in this example appears to work okay for me on mobile. Does it for you?
Allan
I don't think I'm explaining myself clearly.
Datatables is using form-select and option tags for pagelen selection. For reasons beyond the scope of DT and BS, the blue color of the option tag is fixed and is not associated with any BS vars. It cannot be changed, therefore using form-select and option tags looks weird in a highly stylized site.
On the other hand, using dropdown can be stylized to be 100% consistent with any theme. But the problem is that dropdown click event handlers:
- do not work (are not recognized) for mobile form factors when used in a datatables context.
- but work perfectly well outside of datatables (or outside of mobile).
The issue with using dropdown is not the style - it's that there seems a compatibility issue with datatables, which seems to do some funky maneuvering to make mobile work.
I'm sorry if we're being slow here, but could you link to an example please that's got your updated code with Allan's suggestions, with steps on how to reproduce the issue. That'll help us understand your issue,
Colin
Colin,
Thx for jumping in on this one...
Here's my sandbox page: https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html
If you scroll down to the datatables' section - the ITEMS / PAGE dropdown element:
- works fine when the table is not collapsed (any width greater than 576px). "works fine" means you can select 10, 25, 50 or all and the pagelen function will resize the table correctly.
- does not work when the table is collapsed (any width less than 576px). "doesn't work" means clicking on any value in the dropdown does not get detected by the click event handler and therefore, will not change pagelen.
Notes
- "collapsed" refers to whatever changes datatables makes to the size, scrolling, etc. when the screen width is less than 576px.
- dropdown click events work fine outside of datatables (regardless of the screen width).
Re Allan's suggestion:
- The only reason styling came up is that the default tags that datatables uses are form-select and options - neither Bootstrap nor anyone else (AFAIK) can modify the styles for these tags (I believe it's a browser issue).
- Since the options tag cannot be styled (at least, by Bootstrap), I switched to using Bootstrap's dropdown component, which automatically pick up the theme style. So, the dropdown (and dropdown-items) are already correctly styled!
My 2 Cents
I'm pretty sure that datatables is doing some special maneuvering when the screen width is less than 576px (or whatever breakpoint has been set for responsive features to kick in). And I think there is a possible conflict with the dropdown click event handler...
Thx again for all your efforts to follow-up on this...
I'm looking at Allan's code, which uses a different approach than what I've got.
I looked at the Bootstrap 5 demo (col visibility feature) and it certainly seems to detect a click event. But I believe it's:
- using button groups rather than a dropdown, which behaves a little differently.
- bypassing the dom config, which I've already got working...
Just to do a sanity check: does initializing an event listener like this cause any conflict with datatables?
Thx again!
It looks like you have your answers, but I thought I would share another method I learned in the forums here...
For custom buttons, I love using this method which puts it in the dom with the other buttons nicely:
when setting up the dataTable:
then add this:
then add the click event to your button:
thx, but not applicable to my use case.