jQuery 数据表向过滤器添加类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16645737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
datatables add class to filters
提问by nickyfsh
I am currently seeking a method to add an additional custom class to the jQuery datatables filters (Records per pageand Search)
我目前正在寻找一种方法来向 jQuery 数据表过滤器（每页记录和搜索）添加一个额外的自定义类
These items render as follow:
这些项目呈现如下：
<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>
and
和
<div class="dataTables_filter" id="DataTables_Table_0_filter">
<label>
Search: <input type="text" aria-controls="DataTables_Table_0">
</label>
</div>
Does anyone know how I can best add an additional class to each of them? Some advise would be as usual very much appreciated.
有谁知道我如何最好地为他们每个人添加一个额外的课程？一些建议会像往常一样非常感谢。
回答by Nick Fishman
Check out http://legacy.datatables.net/styling/custom_classes. DataTables has a slightly complicated way to override the CSS classes for some of the core elements. Here's one way
查看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();
});
Check out a working example here: http://jsfiddle.net/k2ava/3/.
在此处查看一个工作示例：http: //jsfiddle.net/k2ava/3/。
回答by Breith
i'm use DataTable 1.10.2 and i use :
我正在使用 DataTable 1.10.2 并且我使用：
$.extend( $.fn.dataTableExt.oStdClasses, {
"sFilterInput": "form-control",
"sLengthSelect": "form-control"
});
I go through the extend function instead of jquery.
我通过扩展函数而不是 jquery。
回答by eggs
This can also be easily done with jQuery using fnDrawCallback. Here I add two classes to style for Bootstrap
这也可以通过使用 fnDrawCallback 的 jQuery 轻松完成。在这里，我为 Bootstrap 的样式添加了两个类
fnDrawCallback: function( oSettings ) {
$('div#oTable_length select, div#oTable_filter input').addClass("form-control input-sm");
},
