Как я могу объединить теги Select2 с фильтрацией регулярных выражений DataTables?

Я пытаюсь отфильтровать таблицу jquery DataTables с ключевыми словами/тегами, введенными через интерфейс тегов Select2, используя фильтр регулярных выражений, чтобы я мог фильтровать по ИЛИ вместо точного совпадения.

Я инициализирую DataTables с разделителем, установленным на канал | (регулярное выражение ИЛИ), но он по-прежнему разделяет теги запятыми в атрибуте значения ввода.

jQuery('#programs-table').dataTable({
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            "bPaginate": false,
            "separator": "|"
          });
jQuery("#program-filter-keyword").change( fnFilterGlobal );

Даже если я вручную изменяю поле поиска, оно не всегда фильтруется с помощью ИЛИ, в основном при использовании тегов из двух слов или тегов с запятой, например «защита, безопасность ...» - я думаю, что могу обойти параметр «разделитель». не работает должным образом, используя замену входного значения, чтобы превратить запятые в каналы, хотя это не идеально, поскольку некоторые теги имеют запятые, и мне также нужно заменить пробелы и запятые + пробелы их аналогами регулярных выражений, чтобы это работало.

function fnFilterGlobal () {
          jQuery('#programs-table').dataTable().fnFilter(
            jQuery("#program-filter-keyword").val().replace(',','|'),
            null,
            true,
            true
          );              
        }

Как я это вижу, у меня есть два варианта:

  1. Кто-нибудь знает, как правильно настроить это, чтобы использовать теги из select2 в качестве фильтра ИЛИ для таблиц данных?

  2. Я новичок в регулярном выражении - есть ли способ преобразовать то, что Select2 вводит в качестве входного значения для тегов, в правильное регулярное выражение ИЛИ поиск, включая теги с пробелами/запятыми?

Вот пример CodePen (jsFiddle не работает). http://codepen.io/tsdexter/pen/GcnxA

Спасибо.


person tsdexter    schedule 05.07.2013    source источник


Ответы (1)


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

Я в основном пропускаю значение, которое Select2 передает в скрытое поле ввода, поскольку оно путает запятые из-за опции «разделитель», фактически не изменяя разделитель для режима тегов (он работает только с входами с множественным выбором).

Вот функция фильтрации:

function fnFilterGlobal () {             
    var tags = [];
    jQuery("#s2id_program-filter-keyword .select2-search-choice div").each(function() { 
        tags.push(jQuery(this).text()); 
    });              
    jQuery('#programs-table').dataTable().fnFilter(
        tags.join("|").replace(/ /g,"\\ "), null, true, false
    );              
}

Я создаю массив выбранных тегов, анализируя список <ul>, который создает Select2, и извлекая значения тегов из содержимого <div>.

Затем для фактической строки фильтра я объединил элементы массива с символом вертикальной черты для функции ИЛИ и заменил все пробелы на \ (экранированный пробел).

Наконец, я установил для параметра «умный фильтр» значение false — это ключ, иначе он попытается превратить строку фильтра в сложное регулярное выражение, которое я уже сделал, а экранированные пробелы вызывают недопустимые ошибки регулярного выражения.

Я обновил CodePen, чтобы вы могли увидеть, как иметь таблицы с несколькими тегами ИЛИ с фильтрацией, используя Select2 и DataTables http://codepen.io/tsdexter/pen/GcnxA

person tsdexter    schedule 05.07.2013