How to use Dom to change the location of bLengthChange

CountLessQ

I want to marge bLengthChange and bInfo by making them look like this example:
Viewing the first 10 of 20 items in sets of "10V"
I have been playing around with Dom following this link but I couldn't figure out the correct dom combination to achieve this.
Here is a link to what I have.
Side issue: My select column is on top of the numbering column and I can not figure out why.
Thank you

colin

The best bet is to use the information from page.info() - something like this here.

Colin

CountLessQ

@colin sorry, I should have been more clear, I want to place binfo next to blengthchange at the bottom right. So it will look like
showing 10 of 20 items Show 10 entries
I know how to change the text of them, I can't figure out how to align them next to each other at the bottom right.
Thank you

kthorngren

Side issue: My select column is on top of the numbering column and I can not figure out why.

Change this to be column 1:

        otable.on('order.dt search.dt', function () {
            otable.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                cell.innerHTML = i + 1;
            });
        }).draw();

Viewing the first 10 of 20 items in sets of "10V"

You have:

            "dom": 'lrtip',
            "bInfo": true,
            "bLengthChange": true,
            "pageLength": 10,
            "dom":'',

You don't have to but you can remove the info and lengthChange as they are redundant when you place them in the dom option. You definitely need to remove the "dom":'', option as its causing none of the elements to appear.

My suggestion is to use "dom": 'rt<il>p',. The info and length change elements are wrapped in a div. Then you can line them up with some CSS. You will need to inspect the elements to see how to apply the CSS for your specific environment. I found, in the test case, that the following padding can be added to line up the info and length change element vertically - see the CSS tab in the updated example link below:

.dataTables_wrapper .dataTables_length {
    padding-top: 0.755em;
}

I made all the changes here:
https://jsbin.com/caxozobajo/edit?css,js,output

I also commented out the search input just to make it easier to see the full table.

Kevin

CountLessQ

@kthorngren this is what i asked for, thank you. but how did you know that
'rt<il>p' will do the trick? what if i want to place it in the bottom right of the page for example.

kthorngren

The dom docs explain the how to build the string. Also this example may help example the dom option. Let su know if you still have questions.

Kevin