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

Я использую плагин 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

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

изменить

example image

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

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>

Спасибо!

Ответы

Ответ 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, если строка должна оставаться видимой и возвращать false, если она должна уйти на основе фильтра. Если пользователь не вводит допустимый номер, он возвращает 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, или просто сделать те, что используется по умолчанию для > и < в зависимости от ожиданий ваших пользователей.

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