JQuery Datatables - How to insert div between toolbar and table?

Question

How can I insert a line div class = "between the toolbar and the table itself? If the arrow line is in the image below.

Thank!

Answer 1

I believe that you can accomplish this using the jQuery insertAfter method. http://api.jquery.com/insertafter/

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

Html example:

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

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

JQuery sample code:

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

Answer 2

dom , initComplete, :

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

. , .

Answer 3

annoyingmouse answer

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

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

, div html-, :

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

Answer 4

- HTML-, 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:

// jquery datatable

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

// Div datatable

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

. div . div, , "row" div .