Фильтр dataTables.net без включенного поля фильтра

Question

Я хочу использовать функцию фильтра DataTables, но не хочу использовать их окно поиска с ним.

В их документах в bFilter написано:

Обратите внимание, что если вы хотите использовать фильтрацию в DataTables, это должно оставаться 'true' - чтобы удалить поле ввода фильтрации по умолчанию и сохранить возможности фильтрации, используйте

, после чего предложениеосталось неполным.

Я пытался:

var oTable = $('#sortable').dataTable({
    'bPaginate':false,
    'bInfo':false,
    'bFilter': true // displays Search box, setting false removes filter ability all together
});
$('#Accumulate').click(function(){
    oTable.fnFilter("Accumulate");
});

Answer 1

Вы также можете скрыть, используя класс CSS

<style type="text/css">
.dataTables_filter {
     display: none;
}
</style> 

Answer 2

Использование (потенциально может ускорить инициализацию данных, чтобы избежать некоторых вычислений):

$("#table").dataTable({"bFilter": false});

или любой sDom без f (см. Официальные документы http://datatables.net/usage/options#sDom для получения списка доступных опций):

$("#table").dataTable({"sDom": '...t...'});

Смотрите те же опции на официальном сайте поддержки: http://datatables.net/forums/discussion/289/disable-search-filter-text-box

Answer 3

Pratyush,

Чистое косметическое отображение и скрытие различных элементов пользовательского интерфейса выполняется с помощью параметра sDom:

http://datatables.net/usage/options#sDom

Обратите внимание, что необходимый синтаксис отличается в зависимости от того, используете ли вы jQuery UI или нет.

Answer 4

"sDom": 'ltipr'

- самый простой способ сделать это.

полный пример, который я использовал:

 oTable = $('#overview').dataTable(

        {
           "aoColumns":[
                               null,
                               null,
                               null,
                               null,
                               null,
                                { "sSortDataType":"date-euro"},
                                { "sSortDataType":"date-euro",},
                               null
              ],
              "aaSorting":[],
              "iDisplayLength": -1,
              "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
              "sDom": 'ltipr'

        }
        );