2015-11-02 5 views
1

Я использую jQuery DataTables 1.10.9 и пытаюсь изменить функцию поиска в jQuery DataTables, так что ей нужно как минимум 3 символа перед тем, как начать поиск. Так что я прочитал, что вам нужно отвязать текущий DataTables SearchBox так:Изменение функции поиска datatables

$(".dataTables_filter input").unbind().bind("keyup", function(){ 
    alert("whoo"); 
}); 

Так что теперь он должен предупредить whoo, когда я типа что-нибудь в SearchBox, но это только делает нормальную функцию поиска. Поэтому я предполагаю, что он не получает правильное поле. Я также пробовал:

$('.input[type="search"]').unbind().bind("keyup", function(){ 
    alert("whoo"); 
}); 

, но это тоже не помогло.

var dt = $('#example').DataTable({ 
    "order": [[11, "desc"]], 
    "processing": true, 
    "serverSide": true, 
    "ajax": "/datatables/test" + id, 
    "language": { 
     "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json" 
    } 
}); 

EDIT

Я попробовать код с jQuery DataTables: Delay search until 3 characters been typed OR a button clicked

Но так как я не получил, что работа, я отвечал на этот вопрос.

Мое предположение, что это не работает, так это то, что он просто не может найти входную форму, но я не могу понять, почему, так плохо, напишите мой html здесь.

<input type="hidden" id="q" name="q" value="<?php echo $_GET['q']; ?>"/> 
<table id="example" class="table table-hover" cellspacing="0" width="100%"> 
    <?php if($_GET['k_id'] != ""){?> 
     <input type = "hidden" value = "<?php echo $_GET['k_id']; ?>" id = "k_id" /> 
    <?php }elseif($_GET['w_id'] != ""){ ?> 
     <input type="hidden" value="<?php echo $_GET['w_id']; ?>" id="w_id"/> 
    <?php } ?> 
    <thead> 

Эта страница о поиске каждого продукта, имеющегося в базе данных. 3 поля ввода есть, поэтому, когда пользователь просматривает профиль кого-то, и он хочет посмотреть, какие продукты они продают, он заполнит переменную и отправит ее в функцию datatables, как это. (Что также объясняет, почему + идентификатор за АЯКС URL)

if($('#k_id').val() > 0) { 
      var id = "?k_id=" + $('#k_id').val(); 
     }else if($('#w_id').val()){ 
      var id = "?w_id=" + $('#w_id').val(); 
     }else{ 
      var id = ""; 
     } 

Форма ввода находится внутри DIV с ID = example_filter и класс = dataTables_filter (я бы загрузить изображение, но я не имею 10 респ еще XD).

+1

Возможный дубликат [DataTables JQuery: Задержка поиска до 3-х символов не было напечатано или кнопка нажата] (http://stackoverflow.com/questions/5548893/jquery-datatables-delay-search-until -3-символов, которые были напечатаны или нажаты кнопку-кнопку) – markpsmith

ответ

3

РЕШЕНИЕ

Используйте код, приведенный ниже, чтобы отключить обработчик по умолчанию и прикрепить свой собственный обработчик событий, когда пользователь вводит что-то в окне поиска.

$('.dataTables_filter input', dt.table().container()) 
    .off('.DT') 
    .on('keyup.DT cut.DT paste.DT input.DT search.DT', function (e) { 
     // If the length is 3 or more characters, or the user pressed ENTER, search 
     if(this.value.length >= 3 || e.keyCode == 13) { 
      // Call the API search function 
      dt.search(this.value).draw(); 
     } 

     // Ensure we clear the search if they backspace far enough 
     if(this.value === "") { 
      dt.search("").draw(); 
     } 
    }); 

ССЫЛКИ

+0

Эй, спасибо за быстрый ответ! Не уверен, что вы имеете в виду с table.table(). Container(). Мне нужно поместить мой идентификатор таблицы $ («# example») или просто это? Заранее спасибо ^^ – Kroodjebaas

+0

@Kroodjebaas, скорректировал код, 'dt.table(). Container()' возвращает 'div' элемент, который содержит всю таблицу. –

+0

Спасибо за это! к сожалению его не работает .. обновил мой вопрос! – Kroodjebaas

0

это должно сделать это, если длина входного 3 или более символов он ищет свой входной вал, иначе он сохраняет все Результаты. working jsfiddle

$('.dataTables_filter input').unbind().bind("input", function (e) { 

    if ($(this).val().length < 3) 
     dt.fnFilter(""); 
    else 
     dt.fnFilter($(this).val()); 
}); 
+0

Спасибо за ваш ответ, к сожалению, это не так: | обновил мой вопрос. – Kroodjebaas

1

Ok так я понял, что моя проблема была ..

JQuery ищет $ ('dataTables_filter вход'), прежде чем она на самом деле существует. и ответ на это заключался в том, чтобы поставить окно.нагрузка вокруг него

$(window).load(function(){ 
      var iets = $('.dataTables_filter input'); 
      iets.unbind().bind("keyup", function (e) { 
       if(iets.val().length >= 3) { 
        dt.search(iets.val()).draw(); 
       } 
       if(iets.val() === ""){ 
        dt.search(iets.val()).draw(); 
       } 
      }); 
     }); 
Смежные вопросы