Page Len Selector Control - Styling

IMTanuki

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!

allan

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.

• I can't add a dropdown options list?

You can have the dropdown button as well as the select length input if you want.

• I can't have 2 buttons in 2 different locations (via the dom "B" option)?

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.

is there any way to add a bootstrap dropdown element to the table configuration?

See my first question above.

Allan

IMTanuki

Thx so much! I'll give it a go!

IMTanuki

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...

<ul class="dropdown-menu animated fadeIn slow" >
    <li>10</li>
    <li>25</li>
    <li>50</li>
        <li>100</li>
</ul> 

FWIW
Select2 provides an alternative vis a vis a jquery plugin (but I think it's overkill) - https://select2.org/dropdown

IMTanuki

I almost have a solution:

1. create custom control using bootstrap dropdown classes
2. add custom control to table dom
3. add event listeners for each <li> tag in custom control dropdown

issues
works perfect for all form factors except xs (mobile), which is where datatables' responsive mode kicks in.

• could there be a conflict?

// instantiate table
var tableSandbox =  $ ( '#table-sandbox' ).DataTable ( {
    // general features
    deferRender: true,
    stateSave: true,
    info: true, // show x of y records
    processing: true,

    // dom
    dom:
        "<'row'<'d-none d-md-flex justify-content-between pb-0'<\"control-paglen\">f>>" +
        "<'row'<'d-flex d-md-none justify-content-between pb-0'<\"control-paglen\">f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'d-none d-md-flex justify-content-between pt-2'ip>>" +
        "<'row'<'d-flex d-md-none justify-content-between pt-2'ip>>" +
        "<'row'<'d-none d-md-flex justify-content-end pt-2'B>>" +
        "<'row'<'d-flex d-md-none justify-content-center pt-2'B>>",

    // buttons
    // note
    // - will not display unless dom is modified using code 'B'
        buttons: [
            {
            extend: "excel",
            className: "btn-primary",
            titleAttr: 'Save in Excel',
            text: 'Save in Excel'
            }
        ],...

//  custom control
    $("div.control-paglen").html('<div class="dropdown"> <button id="table-saandbox-pagelen"  class="btn btn-primary btn-sm dropdown-toggle" type="button"  data-bs-toggle="dropdown" aria-expanded="false">Records per Page </button> <ul class="dropdown-menu animated fadeIn " aria-labelledby="table-sandbox-pagelen"> <li id="table-sandbox-pagelen-01" class="dropdown-item" >10</li><li id="table-sandbox-pagelen-02" class="dropdown-item" >25</li><li id="table-sandbox-pagelen-03" class="dropdown-item" >50</li><li id="table-sandbox-pagelen-04" class="dropdown-item" >All</li></ul></div>');

// custom control event listener
    $('#table-sandbox-pagelen-01').on( 'click', function () {
        tableSandbox.page.len( 10 ).draw();
    } );

    $('#table-sandbox-pagelen-02').on( 'click', function () {
        tableSandbox.page.len( 25 ).draw();
    } );

    $('#table-sandbox-pagelen-03').on( 'click', function () {
        tableSandbox.page.len( 50 ).draw();
    } );

    $('#table-sandbox-pagelen-04').on( 'click', function () {
        tableSandbox.page.len( -1 ).draw();
    } );
}

IMTanuki

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.

IMTanuki

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...

kthorngren

See if this thread helps.

Kevin

IMTanuki

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!

IMTanuki

• typo- - I can't use the code provided by Kevin...

allan

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

IMTanuki

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 ...

allan

1) The background colour in that example is coming from this style in the Bootstrap stylesheet:

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #0d6efd;
}

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

IMTanuki

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.

colin

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

IMTanuki

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...

IMTanuki

I'm looking at Allan's code, which uses a different approach than what I've got.

IMTanuki

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?

document.querySelector ( '#table-sandbox-01-pagelen-01' ).addEventListener ( "click", function ( e ) {
    alert ( "click event 01" );
    tableSandbox01.page.len ( 10 ).draw ();
    } );

Thx again!

montoyam

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:

dom: '<"total_Charges">B<"GenerateButton">Pfrtip',

then add this:

$("div.GenerateButton").html('<button type="button" class="btn"id="btnGenerate" disabled="disabled">Generate Line Items</button>');

then add the click event to your button:

        $("#btnGenerate").on("click", function () {
            $("#btnGenerate").prop("disabled", true);
            $.ajax({
                url: 'api/SDPlus_BillableItems/GenerateItems?resultType=' + recordTypeID,
                success: function (result) {
                    if (result == "success") {
                        alert("Line Items have been generated");
                        getRecordCounts();
                        BillableItemsTable.ajax.reload();
                    } else {
                        alert("There were errors generating Line Items. Please contact a developer");
                    }
                }
            });
        });

IMTanuki

thx, but not applicable to my use case.