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

任何人都有修改过滤器插件行为以实现此行为的经验吗？感谢。

修改

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>

谢谢！

Answer 1

所需的3个步骤应该是：

创建用户界面
编写过滤功能
设置事件以在UI更改时重绘DataTable

首先创建UI。对我来说，捕获用户意图的最简单方法是使用一个选择框，用户可以选择他想要使用的比较运算符：

<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时，在UI元素上设置事件以在用户进行更改时重绘表格：

$(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(); } );
});

此过滤器仅适用于正整数。小数和负数支持需要更多工作。您还可以扩展该功能以添加＆gt; =和＆lt; = support，或者只是将这些设置为＆gt;的默认行为。和＆lt;取决于您的用户期望。

我还将事件监听器再次附加到一个自由浮动输入文本框。我用基本的DataTable尝试了这个并且它有效。您需要将行为附加到列底部的那些文本框中，但我不确定您是如何将它们放在那里的 - 我从未使用DataTable完成此操作。

带有比较运算符的jQuery DataTables过滤器列

1 个答案: