jQuery Datatables - 如何在工具栏和表之间插入div？

Question

如何在工具栏和表格本身之间插入div class =“row”？ 箭头线位于下图中。

谢谢！

Answer 1

我认为你可以使用JQuery insertAfter方法完成这个任务。 http://api.jquery.com/insertafter/

首先，使用工具栏的选择器，然后使用insertAfter函数。

示例Html：

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

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

示例Jquery代码：

$("#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")
    }
});

工作示例here。希望有所帮助。

Answer 3

以下是对annoyingmouse的回答的一个小改进

而不是

  

$（＆＃34;＃extra＆＃34;）。text（＆＃34; Hello World＆＃34;）

尝试使用

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

将div HTML放在某个地方，我把它放在数据表格标签

之上

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数据表

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

//在数据表

上方插入Div

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

注意：我想在div中放置一些控件并将其显示在网格上方和搜索控件下方。使用上面的代码插入div后，我必须在div中使用bootstrap“row”类来正确显示控件。