Moving .dataTables_info around the page

Moving .dataTables_info around the page

sohelmugalsohelmugal Posts: 5Questions: 2Answers: 0
edited December 2021 in TableTools

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 14,442Questions: 1Answers: 2,460

    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

  • sohelmugalsohelmugal Posts: 5Questions: 2Answers: 0

    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.

  • sohelmugalsohelmugal Posts: 5Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 16,767Questions: 25Answers: 3,969
    Answer ✓

    Inside initComplete do something like this:

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

    Kevin

  • sohelmugalsohelmugal Posts: 5Questions: 2Answers: 0
    edited December 2021

    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.

Sign In or Register to comment.