Move the records per page next to pagination in datatables

Question

I'm using datatables , with their example i was able to build tables nicely. But the problem is i don't seem to understand how to move the " records per page " element, which is a " span6 " class of bootstrap. i do get the point that it's actually javascript which is doing this, need some help on this. Here is the LINK for the example i'm using.

Answer 1

This is the div you are taking about in that page

<div class="span6">
    <div id="example_length" class="dataTables_length">
        <label>
            <select size="1" name="example_length" aria-controls="example">
                <option value="10" selected="selected">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>records per page</label>
    </div>
</div>

Just copy this to other location and modify the css accordingly.

To modify the DOM using Javascript. http://woork.blogspot.in/2007/10/how-to-change-text-using-javascript.html

Answer 2

Take a look at this page in their documentation... DataTables dynamic language . It doesn't give the best explanations of how to move things but it's a good place to start experimenting. I was able to hide or change the "records per page" text and I would image there is a way to move it as well.

The preamble on that page says "Changing the language information displayed by DataTables is as simple as passing in a language object to the dataTable constructor. The example above shows a different set of English language definitions to be used, rather than the defaults."

"oLanguage": {
    "sLengthMenu": "Display _MENU_ records per page"
}

should give you a place to start.