datatables将类添加到过滤器

Question

我目前正在寻找一种方法来为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>

有谁知道我怎样才能最好地为每个人增加一个额外的课程？有些建议会像往常一样非常感激.

Answer 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/.

Answer 2

我正在使用DataTable 1.10.2并使用:

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

我通过extend函数而不是jquery.