lengthMenu by itself with $.extend( true, DataTable.defaults, {...}); ?

mihomes

Have a unique problem and not sure if it is possible or 'built-in' to Datatables. Using :

$.extend( true, DataTable.defaults, {
    language: {
        lengthMenu: 'per page _MENU_'
    }
});

will create this on output when the table is created :

<div class="dataTables_length" id="dataTable_length">
    <label>per page
        <select name="dataTable_length" aria-controls="dataTable" class="form-control">
            <option value="10">10</option>
            <option value="25">25</option>
        </select>
    </label>
</div>

The <select> is 'in' the <label> element. I need it by itself like, but it doesn't seem possible to do so due to way DataTables creates it :

<div class="dataTables_length" id="dataTable_length">
    <label>per page</label>
    <select name="dataTable_length" aria-controls="dataTable" class="form-control">
        <option value="10">10</option>
        <option value="25">25</option>
    </select>
</div>

If I try :

$.extend( true, DataTable.defaults, {
    language: {
        lengthMenu: '<label class="col order-sm-2">per page</label>_MENU_'
    }
});

I end up with a label within a label :

<div class="dataTables_length" id="dataTable_length">
    <label>
        <label class="col order-sm-2">per page</label>
        <select name="dataTable_length" aria-controls="dataTable" class="form-control">
            <option value="10">10</option>
            <option value="25">25</option>
        </select>
    </label>
</div>

Is there any way to have control over how this is created so the <select> is not 'IN' the <label> element? I also need the same behavior for the search box so the <input> is not 'IN' its <label> element. Any help would be appreciated. I am reworking a current site with DataTables and trying to make it behave better responsively with Bootstrap 4... this little issue with elements 'in' the <label> other than the label wording itself is my bottleneck.

allan

The benefit of having the select inside the label is that it is an implicit link between them - it means that if you click on the label part then it will give the select element focus. The other type of link is an explicit link using a for attribute on the label and an id on the select. That seemed redundant to me which is why it does an implicit link.

If you want to separate them you'll need to use a little jQuery inside the initComplete callback. The built in length control's formatting is coded into DataTables directly.

Allan

mihomes

Damn, I was hoping this was something configurable in some way. I am changing the position/width of label/input/select depending on screen size so it is more responsive friendly. What I wish to do just isn't possible when they are populated in an implicit method.

I suppose I could hack things as you mentioned, but would need to do so on drawCallback as I use serverside processing. That would be fairly easy to do, but messy and would also would look pretty ugly during the delay (the screen would not show 'correctly' until the data is received on each draw).

allan

initComplete would still be the callback to use, even when server-side processing.

Allan