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

Posted 2023-05-07

【中文标题】jQuery Datatables - 如何在工具栏和表格之间插入 div？

【英文标题】：jQuery Datatables - How to insert a div between the toolbar and the table?

【发布时间】：2016-12-08 11:12:07

【问题描述】：

如何在工具栏和表格本身之间插入一个 div class="row"？ 箭头线在下图中的位置。

谢谢！

【问题讨论】：

您是在询问如何动态执行此操作，还是在打开页面之前？

感谢您帮助我。由于表格和工具栏是动态生成的，因此不确定如何回答该问题。新行本身是静态的。工具栏是一个 div class="row'。我只需要该行下的另一行。希望这是有道理的......再次感谢。

你能发布你开始的 html 吗？

不幸的是，表格本身在使用此插件的 Angular dataTableDirective.js 中被混淆，无法识别 - datatables.net/examples/styling/bootstrap.html。但是呈现的 HTML 与该演示页面上的第一个示例中的内容相似。

这样的。 <div class="datatables_wrapper"> <div class="row">toolbar</div> <div class="row">inserted new row</div> <table></table> </div>

【参考方案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>");

【讨论】：

因为确定表格之前的哪些元素位于工具栏本身并不总是那么简单 - 事实上，默认情况下，工具栏没有单个 div 或其他容器元素 - 它是可能更好地定位表本身并使用insertBefore。

@tmpearce DataTables 在表格之前添加了几个 div，所以这也可能是一个问题。

非常感谢您的帮助。我们可以使用 CSS 选择器，例如 :nth-last-child 吗？

应该可以使用这样的选择器...我建议您尝试使用浏览器的开发人员工具功能 (F12) 来识别 DOM 中要追加或插入的对象。这应该有助于指导您在 Jquery 选择器中使用什么。祝你好运！！

刚刚看了datatables.net/examples/styling/bootstrap.html上的例子，为什么不在元素后面试试insertAfter呢？除非您在此示例中没有显示额外的 div。

【参考方案2】：

您可以使用dom 选项设置展示位置，然后使用initComplete 选项设置内容，如下所示：

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

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

【讨论】：

这将在搜索框旁边添加“Hello World”，但根据问题，它需要位于搜索框的下方！

【参考方案3】：

这是对annoyingmouse的回答的一个小改进

代替

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

【讨论】：

当我尝试这个时，“Hello World”出现在搜索框旁边，但我需要它在搜索框下方的一行，问题中的要求也相同

【参考方案4】：

在某个地方有你的 div HTML，我把它放在 datatable 表格标签的上方

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 中使用引导程序“row”类来正确显示控件。