2016-02-04 5 views
3

Привет Я использую datatables, и я хотел бы отфильтровать свои данные точным словом.Datatables точный поиск слов

Мои данные таблицы выглядят следующим образом;

+-----+----------+ 
| num | status | 
+-----+----------+ 
| 1 | Active | 
+-----+----------+ 
| 2 | Inactive | 
+-----+----------+ 
| 3 | Active | 
+-----+----------+ 

Всякий раз, когда я ищу Active Я также вижу все Inactive тоже. Есть ли способ отфильтровать это, чтобы либо столбец статуса отображал только точные слова.

My JS находится ниже;

$(document).ready(function() { 
    var table = $('#items').DataTable({ 
    select: true, 
    responsive: true 
    }); 
}); 

Я читал через API однако я не могу сделать много смысла его. Возможно, мне нужно написать некоторое регулярное выражение?

Есть пример (я думаю) here, однако мне нужно его изменить в соответствии с моими потребностями.

Любая помощь или совет будут оценены.

+0

попробуйте этот http://datatables.net/examples/api/multi_filter.html –

+1

Фильтр лучше, если вы сделаете это с помощью серверных скриптов. В качестве предложения, состояния 'active' и' inactive' могут быть пронумерованными значениями (0 или 1) и фильтроваться им, не будет неоднозначных результатов. –

+0

Это отличное предложение об 0 и 1 @ MarcosPérezGude. Но разве это не означает, что показывать 0 и 1 конечным пользователям также в таблице? В идеале я бы хотел, чтобы они увидели слова «Активный» и «Неактивный». Они фактически хранятся как 0 и 1 в моем MySQL db. Я конвертирую их в строку (Active/Inactive) через php и отображаю их в таблице. –

ответ

2

Если вы считаете, что вам лучше с custom filter для выполнения этой задачи. unbind обработчиков по умолчанию и каждый раз выполнять точный фильтр соответствия. Если у вас есть таблица

var table = $('#example').DataTable() 

Затем используйте Четк.совп пользовательский фильтр таким образом

$('.dataTables_filter input').unbind().bind('keyup', function() { 
    var searchTerm = this.value.toLowerCase() 
    if (!searchTerm) { 
     table.draw() 
     return 
    } 
    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { 
     for (var i=0;i<data.length;i++) { 
     if (data[i].toLowerCase() == searchTerm) return true 
     } 
     return false 
    }) 
    table.draw(); 
    $.fn.dataTable.ext.search.pop() 
}) 

здесь демо ->http://jsfiddle.net/hmjnqjbs/1/ поиск попробовать для tokyo.


ОК. Я понимаю, что речь идет не о «точных словах», как в фильтре с точным совпадением, а о поиске целого слова. Мы хотим видеть Vaio Q900 при поиске по vaio, но мы не хотим видеть VaioQ900, потому что Vaio здесь не целое слово. Эта проблема просто решается с помощью регулярных выражений границы слова \b: скрипка

$('.dataTables_filter input').unbind().bind('keyup', function() { 
    var searchTerm = this.value.toLowerCase(), 
     regex = '\\b' + searchTerm + '\\b'; 
    table.rows().search(regex, true, false).draw(); 
}) 

OP от комментария ниже обновляемого ->http://jsfiddle.net/hmjnqjbs/3/

Теперь active, vaio и так далее работает, как ожидалось.

+0

@johnny_s, мой плохой :(Возможно, было слишком поздно вчера после всех событий, фильтр должен быть «сброшен», если 'searchTerm' пуст (может быть сделано простым' draw() ') - обновил ответ – davidkonrad

+0

@johnny_s - Я понимаю, что, возможно, совершенно неправильно понял ваш вопрос. Вы не хотите точного совпадения - вы просто хотите найти целые слова и избегать сложных слов. Если так, пользовательский фильтр не нужен, см. обновленный ответ, и ваша скрипка обновлена ​​-> http://jsfiddle.net/hmjnqjbs/3/ – davidkonrad

Смежные вопросы