jQuery Datatables - How to insert a div between the toolbar and the table?

Question

How can I insert a div class="row" between the tool bar and the table itself? Where the arrow line is in the below image.

Thank you!

Are you asking how to do this dynamically, or before you open the page? — BobRodes
– BobRodes, Commented Aug 3, 2016 at 4:24
Thank you for helping me. Not sure how to answer that question since the table and tool bar are dynamically generated. The new row itself is static. The toolbar is a div class="row'. I just need another row under that one. Hope that makes sense... Thanks again. — D4A60N
– D4A60N, Commented Aug 3, 2016 at 16:27
Unfortunately the table itself is obfuscated beyond recognition in an Angular dataTableDirective.js that utilizes this plugin - datatables.net/examples/styling/bootstrap.html. But the rendered HTML is similar to what can be found in the first example on that demo page. — D4A60N
– D4A60N, Commented Aug 3, 2016 at 17:54
Something like this. <div class="datatables_wrapper"> <div class="row">toolbar</div> <div class="row">inserted new row</div> <table></table> </div> — D4A60N
– D4A60N, Commented Aug 3, 2016 at 18:23

Dinglemeyer NeverGonnaGiveUUp · Accepted Answer · 2016-08-02 22:58:24Z

2

I reckon you can accomplish this using the JQuery insertAfter method. http://api.jquery.com/insertafter/

First, use a selector for your toolbar and then use the function insertAfter after that.

Sample Html:

<div id="toolbar" > Your stuff here </div>

<table id="yourTable">...</table>

Sample Jquery code:

$("#toolbar").insertAfter("<div class='row'></div>");

edited Aug 2, 2016 at 22:58

answered Aug 2, 2016 at 22:44

Dinglemeyer NeverGonnaGiveUUp

7122 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tmpearce Over a year ago

Since it isn't always straightforward to figure out which elements before the table are in the toolbar itself - in fact, by default there's not a single div or other container element for the toolbar - it's probably better to target the table itself and use insertBefore.

BobRodes Over a year ago

@tmpearce DataTables adds several divs before the table, so that could be a problem as well.

D4A60N Over a year ago

Thanks so much for your help. Could we use a CSS selector such as :nth-last-child?

Dinglemeyer NeverGonnaGiveUUp Over a year ago

Using a selector like that should be possible... I suggest you try using a browser's developer tools feature (F12) to identify which object in the DOM to either append to or insert after. That should help guide you on what to use in your Jquery selector. Good luck!!

Dinglemeyer NeverGonnaGiveUUp Over a year ago

Just looked at the example on datatables.net/examples/styling/bootstrap.html, why not try insertAfter after the </thead> element? Unless you have extra divs in the mix that aren't shown on this example.

annoyingmouse · Accepted Answer · 2016-08-03 06:14:48Z

0

You could use the dom option to set the placement and then initComplete option to set the content like this:

var table = $('#example').DataTable({
    "dom": "lfr<'#extra'>tip",
    "initComplete": function(settings, json) {
        $("#extra").text("Hello World")
    }
});

Working example here. Hope that helps.

answered Aug 3, 2016 at 6:14

annoyingmouse

5,6991 gold badge31 silver badges48 bronze badges

1 Comment

rakesh kotian Over a year ago

This will Add "Hello World" right next to search box, But as per the question, it needs to come below line of search box!

Community · Accepted Answer · 2017-05-23 12:33:44Z

0

Here is a small improvement on annoyingmouse's answer

Instead of

$("#extra").text("Hello World")

Try using

var table = $('#example').DataTable({
    "dom": "lfr<'#extra'>tip",
    "initComplete": function(settings, json) {
        $("#extra").html($("#extraDiv"))
    }
});

So you can write the div into your html page so its far more readable:

//↑ rest of page that way
<div id="extraDiv" style="hidden">
 <span>Hello world</span>
</div>

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Aug 3, 2016 at 6:30

Frog

1246 bronze badges

1 Comment

rakesh kotian Over a year ago

When i tried this the "Hello World" is appearing right next to search box, but i would need it a line below the search box also the requirement in the question is also same

A_0 · Accepted Answer · 2017-09-08 10:31:56Z

Have your div HTML somewhere, I have put it just above datatable table tag

HTML :

//Div To insert

    <div id="divToInsert" >
    </div>

//Datatable table  

    <table id="Grid" class="dataTable table table-striped table-bordered " style="width: 100% !important">
        <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>        
        </tr>
        </thead>
        <tbody>
        </tbody>   
    </table>

Javascript :

//initialise jquery datatable

$('#Grid').DataTable({....});

//Insert Div just above the datatable

  $("#divToInsert").insertBefore($("#Grid"));

Note: I wanted to put some controls inside div and display it just above the grid and below search control.After inserting div using above code I had to use bootstrap "row" class inside div to display the controls properly.

Collectives™ on Stack Overflow

jQuery Datatables - How to insert a div between the toolbar and the table?

4 Answers 4

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related