Datatables - показывать только поле ввода при загрузке таблицы - PullRequest
Новая
       20

Datatables - показывать только поле ввода при загрузке таблицы

2 голосов
/ 02 ноября 2011

В настоящее время я работаю над сайтом, который включает использование Datatables. После настройки он выглядит как обычная поисковая выдача.

Функция, которую я хочу реализовать: При загрузке страницы должно отображаться только поле ввода, а строки данных должны быть скрыты до тех пор, пока не будет введена строка поиска.

Так что на самом деле он должен вести себя так, как вы это видите в известных поисковых системах. Я не нашел информации об этом на форуме или здесь.

Он пытался использовать jQuery keypress (), но он не работал . Я пытался спрятать стол при нажатии клавиш, но ничего не получалось (только для начала). 

$("#inputbox").keypress(function () {
      $("table.display").css("display":"none");
    });

Но тумблер работает нормально: 

$("#button").click(function () {
      $("table.display").slideToggle();
    });

Так что проблема как-то связана с полем ввода и функцией нажатия клавиш, я думаю.

Был бы очень рад получить отзывы здесь.

Ответы [ 2 ]

1 голос
/ 02 ноября 2011

как то так? 

$('table tr').hide();
$('input').keypress(function(e) {
    $('table td:contains("'+String.fromCharCode(e.charCode)+'")').closest('tr').show();
});

примечания:

EDIT если вы хотите использовать подключаемый модуль фильтрации данных, вы можете сделать это, когда вы «датируете» свою таблицу: 

var yourDataTable = $('#yourDataTable').dataTable({...});
var dummySearchString = 'this.will.never.be.found.mwhahahahhaaa';
yourDataTable.fnFilter(dummySearchString);
$('.dataTables_filter input').css('color', 'white');
$('.dataTables_wrapper').delegate('.dataTables_filter input', 'focus', function () {
    if (this.value === dummySearchString) 
    {
        this.value='';
        $(this).css('color', 'black');    
        yourDataTable.fnFilter('');  // only if you want the table to appear when you click the search field
    }
});

в основном, сразу после того, как таблица была «датирована», мы просим плагин применить поиск (мы просим его искать «несуществующее» значение). Следовательно, плагин «скрывает» все строки. чтобы быть очень приятным, цвет текста устанавливается белым, поэтому он не отображается в поле ввода.

0 голосов
/ 03 ноября 2011

Вы можете скрыть / показать таблицу в соответствии с тем, что есть строки: 

$('table').hide();
$('#inputbox').keyup(function(e) {
   var numRows = $('table tr').length;
   if(numRows >0){
    $('table').show();
   }else{
     $('table').show();    
   }
});

в этом случае возможно, что вы фильтруете таблицу, используя механизм фильтрации данных (это то, что вы должны сделать вместо того, чтобы фильтровать данные самостоятельно)

...