样式化 jQuery 数据表搜索面板

Question

我刚刚发现了数据表搜索面板，但它的样式给我留下了深刻的印象。我已经搜索了应用样式的文档，但无法使用：

var tblItems = $("#itemsTable").DataTable({
    jQueryUI: true,
    data: [],
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'searchPanes',
            config: {
            //dtOpts: {
                columns: [0, 1, 2, 5 ],
                layout: 'columns-4',
                hideCount: false,
                info: false,
                controls: true,
                cascadePanes: false,
                className: 'myCustomClass'
            }
        },

没有检查搜索面板中使用的类 (dtsp-xxx) 并覆盖它们，我如何将样式应用于面板（字体大小、颜色、引导类...）？

我为 myCustomClass 设置了一些可笑的东西，比如厚红色边框和青色背景颜色，以便轻松查看它是否已应用。

Answer 1

您能做的有些有限 - 但这可能会有所帮助：

我在我的 DataTable 中添加了以下内容：

columnDefs:[{
  searchPanes:{
    className: 'myCustomClass'
  },
  targets: '_all'
}]

这会将类名添加到搜索窗格中的每个面板。

然后我添加了一个非常基本的样式：

<style>
.myCustomClass div.dataTables_scroll {
  border-style: solid;
  border-color: red;
  border-width: 1px;
}
</style>

这针对每个窗格中的可滚动区域：

几点说明：

1. 我从未将搜索窗格放在按钮控件中 - 很好！但我确实注意到（对我而言）这样做会在浏览器控制台中引发一些错误，当搜索窗格不在按钮中时不会发生这些错误。不确定这是否会干扰任何功能。

2. 您必须将类名添加到像这样的columnDefs 值，这有点违反直觉（对我来说）。它有效，但也有可能有更好的方法。