jquery - 样式化 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 设置了一些荒谬的东西，比如厚红色边框和青色背景颜色，以便轻松查看它是否已应用，而事实并非如此。

标签： jquerycssdatatables

Answer 1

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

我在我的数据表中添加了以下内容：

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

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

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

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

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

几点注意事项：

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

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