如何使用带有 DataTables 的子行自定义按钮答案

【问题标题】：How to customize buttons using Child rows with DataTables如何使用带有 DataTables 的子行自定义按钮
【发布时间】：2019-09-20 18:38:29
【问题描述】：

我将子行与 DataTables 一起使用。我想自定义按钮（open_details和close_details）。我想使用其他图像。我正在关注this 示例。你能帮帮我吗？

【问题讨论】：

标签： jquery css datatables

【解决方案1】：

您无需付费即可更改样式...对于他们提供的产品和支持服务，119 美元便宜。我很乐意付钱。

只需添加这些 css 覆盖：

/* when closed */
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before{
    background-image: url('/your-closed-image.png');
    background-color: purple;
}

/* when open */
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before{
    background-image: url('/your-open-image.png');
    background-color: black;
}

应该让您朝着正确的方向开始。最适合透明的 png 图像。

【讨论】：

谢谢，但是我将如何区分图像打开和关闭。我想使用两个不同的图像。
我为上面的打开/关闭状态添加了 css。如果您在 Inspector 工具中使用 Chrome 浏览器 Dev Tools，您可以自己查看。

【解决方案2】：

为了能够对样式进行更改，您需要付费，而且这并不便宜。起价为 109 欧元（119 美元），在此页面上您可以查看所有套餐： https://editor.datatables.net/purchase/index?currency=eur

在此页面上，您可以看到付费后的收获： https://editor.datatables.net

【讨论】：