Столбец фильтра jQuery DataTables с операторами сравнения

Question

Я использовал плагин DataTables jQuery с подключаемым фильтром, и это потрясающе. Однако мне было интересно, можно ли фильтровать столбцы таблицы по строкам с помощью оператора сравнения (например, '<' '>' or '<>') перед значением во входном фильтре внизу таблицы.

http://www.datatables.net/plug-ins/filtering#functions

Существует способ фильтрации по диапазону с использованием полей ввода, которые принимают максимальное и минимальное значение. Однако я хотел бы отказаться от добавления двух дополнительных полей ввода и как-то проанализировать входные данные этого столбца.

Строка, которую я хочу отфильтровать, содержит только целые числа (возраст).

несколько примеров желательного поведения:

input      results
< 20       less than than 20
> 20       greater than 20
20 - 80    between 20 and 80
<> 20      not 20

У кого-нибудь есть опыт изменения поведения плагина фильтра для достижения такого поведения? Спасибо.

редактирование:

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

HTML для фильтра ввода выглядит так:

<tfoot>
    <tr>
        ...
        <th class=" ui-state-default">
            <input type="text" class="search_init" value="Age" name="search_age">
        </th>
        <th class=" ui-state-default">
            <input type="text" class="search_init" value="PD Status" name="search_age_of_onset">
        </th>
        ...
    </tr>
</tfoot>

Спасибо!

Answer 1

3 необходимых шага должны быть:

• создать пользовательский интерфейс
• написать функцию фильтрации
• установка событий для перерисовки DataTable при изменении пользовательского интерфейса

Сначала создайте пользовательский интерфейс. Для меня самый простой способ уловить намерения пользователя - использовать поле выбора, где пользователь может выбрать, какой оператор сравнения он хочет использовать:

<select id="filter_comparator">
  <option value="eq">=</option>
  <option value="gt">&gt;=</option>
  <option value="lt">&lt;=</option>
  <option value="ne">!=</option>
</select>
<input type="text" id="filter_value">

Теперь вам нужно вставить функцию в набор фильтров. Функция просто захватывает указанный оператор сравнения и использует его для сравнения данных строки с введенным значением. Он должен возвращать истину, если строка должна оставаться видимой, и возвращать ложь, если она исчезает в зависимости от фильтра. Если пользователь не вводит правильный номер, он возвращает true. Измените column_index на соответствующее значение:

$.fn.dataTableExt.afnFiltering.push(
  function( oSettings, aData, iDataIndex ) {
    var column_index = 2; //3rd column
    var comparator = $('#filter_comparator').val();
    var value = $('#filter_value').val();

    if (value.length > 0 && !isNaN(parseInt(value, 10))) {

      value = parseInt(value, 10);
      var row_data = parseInt(aData[column_index], 10);

      switch (comparator) {
        case 'eq':
          return row_data == value ? true : false;
          break;
        case 'gt':
          return row_data >= value ? true : false;
          break;
        case 'lt':
          return row_data <= value ? true : false;
          break;
        case 'ne':
          return row_data != value ? true : false;
          break;
      }

    }

    return true;
  }
);

Наконец, в точке, где вы создаете DataTable, настраивайте события в ваших элементах пользовательского интерфейса для перерисовки таблицы, когда пользователь вносит изменения:

$(document).ready(function() {
    var oTable = $('#example').dataTable();
    /* Add event listeners to the filtering inputs */
    $('#filter_comparator').change( function() { oTable.fnDraw(); } );
    $('#filter_value').keyup( function() { oTable.fnDraw(); } );
});

---

НА ДРУГОЙ РУКЕ, если вы хотите, чтобы пользователь вводил оператор сравнения вместо его выбора, вам нужно будет проанализировать их ввод. Если у вас есть простое текстовое поле:

<input type="text" id="filter">

Затем вы можете проанализировать входные данные в функции фильтра следующим образом:

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
        var filter = $('#filter').val().replace(/\s*/g, '');
        var row_data = aData[3] == "-" ? 0 : aData[3]*1;

        if (filter.match(/^<\d+$/)) {
            var num = filter.match(/\d+/);
            return row_data < num ? true : false;
        }
        else if (filter.match(/^>\d+$/)) {
            var num = filter.match(/\d+/);
            return row_data > num ? true : false;
        }
        else if (filter.match(/^<>\d+$/)) {
            var num = filter.match(/\d+/);
            return row_data != num ? true : false;
        }
        else if (filter.match(/^\d+$/)) {
            var num = filter.match(/\d+/);
            return row_data == num ? true : false;
        }
        else if (filter.match(/^\d+-\d+$/)) {
            var num1 = filter.match(/^\d+/);
            var num2 = filter.match(/\d+$/);
            return (row_data >= num1 && row_data <= num2) ? true : false;
        }
        return true;
    }
);

и готовый документ:

$(document).ready(function() {
    var oTable = $('#example').dataTable();
    /* Add event listeners to the filtering inputs */
    $('#filter').keyup( function() { oTable.fnDraw(); } );
});

Этот фильтр работает только с натуральными числами. Поддержка десятичных чисел и отрицательных чисел потребует дополнительной работы. Вы также можете расширить функцию, добавив> = и <= support, или просто сделать их поведением по умолчанию для> и <в зависимости от ваших ожиданий пользователя. </p>

Я также снова прикрепил прослушиватель событий к свободному плавающему текстовому полю ввода. Я пробовал это с базовым DataTable, и он работает. Вам нужно будет прикрепить поведение к этим текстовым полям внизу ваших столбцов, но я не уверен, как вы их там получили - я никогда не делал этого с помощью DataTable.