2017-01-18 2 views
-2

Я начинающий, когда дело доходит до разработки веб-сайтов. Я конвертирую свое приложение winforms C# в веб-приложение.jQuery Datatables Плагин пользовательского поиска

Я пытаюсь реализовать пользовательский поиск по таблице, используя jQuery Datatables Plugin. Рассмотрим пример пользовательского поиска (https://datatables.net/examples/plug-ins/range_filtering.html). Я хотел бы показать детали всех сотрудников, кроме офиса в «Эдинбурге».

Фильтровать остальную часть сотрудников через textbox.

Так в основном sql эквивалент

select * from employees where office not like '%Edinburgh%'; 

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

EDIT:

Я составил скрипку (https://jsfiddle.net/53futc2w/5/) с помощью JQuery DataTables и заполняется данными.

При нажатии кнопки Non SC я хотел бы отображать только значения, которые не имеют «SC» в своем описании.

Так в основном sql эквивалент

select * from products where description not like '%SC%'; 

Эти значения для фильтрации на основе данных, представленных в текстовом поле

С уважением

ответ

0

Я не уверен, если «Эдинбург» должно быть трудно , или если вы хотите, чтобы пользователи могли указать свое значение, так что это жестко запрограммированное решение с комментариями для параметра, заданного пользователем:

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { 
    var exclude = 'Edinburgh'; // User provided value: $("#user-exclude-field").val(); 

    if(!exclude) return true; // nothing to exclude, so all rows should be included 

    var re = new Regexp("\\b" + exclude + "\\b", "i"); // using the \b word boundary meta-character to match only "Edinburgh" and not "NewEdinburgh" (typo on purpose) 
    return !re.test(data.office); // return TRUE (i.e. include this row in the search results) if the "office" attribute of the current row data does NOT match our excluded word 
}); 

UPDATE

Так на основе вашего комментария, вот пример скрипку:

https://jsfiddle.net/bjLzkjnc/

UPDATE 2

Итак, вы хотите, чтобы вместо того, чтобы иметь возможность фильтровать все элементы, содержащие слово, или фильтр для всех строк, которые не содержат этого слова. Обновление скрипта: jsfiddle.net/1xh3kys5

Волшебство здесь - переменная filter. Прежде чем это было просто логическая переменная, потому что мы хотели отслеживать два состояния: «содержит SC» и «показать мне все». Но теперь у вас на самом деле есть три состояния: «содержит SC», «показать мне все» и «показать мне все, что делает не содержат SC« ... Так что булева больше не достаточно.

Есть несколько способов приблизиться к этому, но я пошел с фильтрами объектом, так что вы могли бы в конечном счете добавить больше фильтров легко:

var filters = { 
    sc: {active: false, re: new RegExp("\\bSC\\b", "i"), include: true} 
}; 

Фильтры объекта здесь есть только один атрибут, один фильтр, называемый «sc». Этот атрибут представляет собой объект, который имеет несколько атрибутов, которые позволяют нам представлять все из наших трех состояний:

  • активный, чтобы превратить эту конкретную «SC» фильтр вкл/выкл. Поэтому, когда вы хотите показать все строки, вы просто устанавливаете значение false и деактивируете фильтр sc.
  • включает в себя - наш логический элемент, чтобы определить, хотим ли мы включать или исключать строки, содержащие слово «SC».
  • re - это просто регулярное выражение, которое мы будем использовать, когда мы хотим отфильтровать строки.

Когда мы фильтруем строки сейчас, мы просто используем регулярное выражение, чтобы определить, содержит ли определенная строка «SC».

var includes_sc = filters.sc.re.test(data[2]); 
return (filters.sc.include ? includes_sc : !includes_sc); 

Таким образом, на основе «включать» значение атрибута, и сохранить его в переменной с именем includes_sc. Если текущий фильтр хочет всех строк, то включает «SC», мы возвращаем includes_sc как есть. Если, с другой стороны, нам нужны все строки, которые не включают «SC», мы возвращаем обратную (! Includes_sc) из includes_sc.

Надеюсь, это поможет!

+0

Получил это - см. Мой обновленный ответ со своей скрипкой - изменен ... – MacPrawn

+0

Спасибо, миллион. Это сделал трюк. Я пытаюсь переключить то же самое, используя кнопки «Радио» вместо обычной кнопки. https://jsfiddle.net/bjLzkjnc/1/ Вы можете найти обновленную скрипку – Tango

+0

Right, так что вы просто должны установить глобальную переменную 'exclude_sc' к стоимости вашего выбора, а затем перерисовывать таблицу. Поэтому в случае переключателей, просто убедитесь, что при нажатии они устанавливают 'exclude_sc', а затем перерисовывают. – MacPrawn