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

Ответ 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.