datatables добавить класс к фильтрам

В настоящее время я ищу способ добавить дополнительный пользовательский класс в фильтры таблиц данных 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>

Кто-нибудь знает, как мне лучше всего добавить дополнительный класс к каждому из них? Некоторые советы, как обычно, будут очень признательны.


html datatable jquery bootstrap-4
person nickyfsh    schedule 20.05.2013    source источник

Ответы (3)


arrow_upward
17
arrow_downward

Посетите 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/.

person Nick Fishman    schedule 20.05.2013
comment
Проблема, которую я вижу в этом, заключается в том, что обычно вы хотите стилизовать не сам <div>, а сам тег <input>. Не похоже, что у нас есть способ изменить их. - person mpdc; 07.04.2014
comment
@mpdc Мне нужно так, как ты хотел. Я добавил тег ввода в css. Посмотрите эту демонстрацию JSFiddle. - person Lucky; 11.05.2016
comment
Если кто-то хочет просто добавить класс только в поле ввода, сделайте это просто с помощью jquery, например, $(".dataTables_filter input").addClass('custom-class) - person Lucky; 14.07.2016

arrow_upward
17
arrow_downward

я использую DataTable 1.10.2 и использую:

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

Я использую функцию расширения вместо jquery.

person Breith    schedule 17.08.2014

arrow_upward
3
arrow_downward

Это также можно легко сделать с помощью jQuery, используя fnDrawCallback. Здесь я добавляю два класса в стиль для Bootstrap

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