Moving .dataTables_info around the page

sohelmugal

I have a table as follows;

<table id="example" class="compact stripe hover order-column" style="width:100% ">
<thead style="font-weight: bold; background-color: #e0f6ff;">
<tr><th colspan="9">PARTNERS (????????????) </th></tr>
                
                <tr>
                    <th>#</th>
                    <th align="middle"><i class="fas fa-check-square"></i></th>
                    <th>ACRONYM</th>
                    <th>NAME (HQ)</th>
                    <th>ROLE</th>
                    <th>ACTIVITY</th>
                    <th>SPECIALTY</th>
                    <th>CAPACITY</th>
                    <th>ACTIONS</th>
                </tr>
            </thead>
                          
        
            <tbody> Bla bla

I want to place "info" in front of or preferably under PARTNERS such as

PARTNERS (Showing 1 to 556 of 556 entries)
OR
PARTNERS <br>
Showing 1 to 556 of 556 entries

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

You can use dom to move the table's elements around.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

sohelmugal

Thanks, My knowledge of DOM is only for moving "built-in table control elements" above and below the table and with CSS I can move them right and left, even though they come up badly aligned and messy always, esp when it comes to responsiveness. I want to move ".dataTables_info" to a specific place away from places pre-fixed. e.g. inside a table thead or inside a FAB button. Right now I want them next to my table header inside the thead where I have shown question marks.

sohelmugal

I think this is how it looks: http://live.datatables.net/rularihu/1/edit

kthorngren

Inside initComplete do something like this:

$(".dataTables_info").appendTo("myPartners");

Kevin

sohelmugal

So this is what I did, and it worked.

<tr><th colspan="10">PARTNERS                   
<br><div id="infotop"><div></th>
</tr>
<script>
$(document).ready(function() {
    $('#example').DataTable( {  
$(".dataTables_info").appendTo("#infotop");

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.