数据表将类添加到过滤器答案

【问题标题】：datatables add class to filters数据表将类添加到过滤器
【发布时间】：2013-05-14 18:54:27
【问题描述】：

我目前正在寻找一种方法来向 jQuery 数据表过滤器（每页记录数和搜索）添加额外的自定义类

这些项目呈现如下：

<div id="DataTables_Table_0_length" class="dataTables_length">
    <label>
        <select size="1" name="DataTables_Table_0_length" 
                aria-controls="DataTables_Table_0">
            <option value="10" selected="selected">10</option>
            <option value="25">25</option><option value="50">50</option>
            <option value="100">100</option>
        </select>
        records per page
    </label>
</div>

和

<div class="dataTables_filter" id="DataTables_Table_0_filter">
    <label>
        Search: <input type="text" aria-controls="DataTables_Table_0">
    </label>
</div>

有谁知道我怎样才能最好地为他们每个人添加一个额外的类？一些建议将像往常一样非常感谢。

【问题讨论】：

标签： jquery html datatable bootstrap-4

【解决方案1】：

查看http://legacy.datatables.net/styling/custom_classes。 DataTables 有一种稍微复杂的方法来覆盖一些核心元素的 CSS 类。这是一种方法

$(document).ready(function() {
    var extensions = {
        "sFilter": "dataTables_filter custom_filter_class",
        "sLength": "dataTables_length custom_length_class"
    }
    // Used when bJQueryUI is false
    $.extend($.fn.dataTableExt.oStdClasses, extensions);
    // Used when bJQueryUI is true
    $.extend($.fn.dataTableExt.oJUIClasses, extensions);
    $('#example').dataTable();
});

在此处查看一个工作示例：http://jsfiddle.net/k2ava/3/。

【讨论】：

我看到的问题是，您通常想要设置样式的不是<div> 本身，而是<input> 标签本身。看起来我们没有办法修改这些。
@mpdc 我也需要你想要的方式。我在css中添加了输入标签。检查这个JSFiddle demo
如果有人只想在输入字段中添加一个类，只需使用 jquery 即可，$(".dataTables_filter input").addClass('custom-class)

【解决方案2】：

我使用的是 DataTable 1.10.2，我使用的是：

$.extend( $.fn.dataTableExt.oStdClasses, {
    "sFilterInput": "form-control",
    "sLengthSelect": "form-control"
});

我使用的是扩展函数而不是 jquery。

【讨论】：

【解决方案3】：

这也可以通过 jQuery 使用 fnDrawCallback 轻松完成。这里我为 Bootstrap 添加了两个类来设置样式

fnDrawCallback: function( oSettings ) {
$('div#oTable_length select, div#oTable_filter input').addClass("form-control input-sm");
},

【讨论】：