CODEWITHSUNDEEP
jquerydatatabledatatables
D4A60N
D4A60N

Reputation: 187

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

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!

div row where the arrow line is

Upvotes: 6

Views: 6186

Answers (4)

A_0
A_0

Reputation: 1004

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.

Upvotes: 0

Frog
Frog

Reputation: 124

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>

Upvotes: 0

annoyingmouse
annoyingmouse

Reputation: 5699

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.

Upvotes: 0

Dinglemeyer NeverGonnaGiveUUp
Dinglemeyer NeverGonnaGiveUUp

Reputation: 712

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>");

Upvotes: 2

Related Questions