使用jQuery DataTables筛选带有比较运算符的列

Question

我一直在使用DataTables jQuery插件和filter插件，非常棒。但是，我想知道是否可以在表格底部的筛选输入框中，在值之前使用比较运算符（例如''<' '>' 或者 '<>'）按行过滤表格列。

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>

谢谢！

- dting

Answer 1

需要完成的三个步骤如下：

• 创建用户界面
• 编写筛选函数
• 设置事件以在用户界面更改时重新绘制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的时候，设置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(); } );
});

这个过滤器只能用于正整数。支持小数和负数需要更多的工作。你也可以扩展该函数以添加 >= 和 <= 支持，或者根据用户期望将它们作为 > 和 < 的默认行为。

我还把事件监听器再次附加到了一个自由浮动的输入文本框上。我已经尝试了使用基本 DataTable，它可以工作。您需要将该行为附加到列底部的那些文本框上，但我不确定您是如何放置它们的 - 我从未在 DataTable 中这样做过。

- ttubrian

---

非常好的总结！不过，我想知道是否有一种方法可以直接从表格底部的筛选器输入中解析比较运算符，然后将其余部分传递给比较筛选器。我会编辑我的帖子以包含一张图片。我认为我必须更改在keyup上调用的函数来查找运算符。 - dting

你能发一下用于创建 DataTable 的 JS 代码吗？ - ttubrian

我已经添加了输入解析到答案中。如果您能展示一下如何在图像底部实现筛选框，那么也许我可以帮助您将我的筛选函数与之联系起来。我从未在我的 DataTables 中看到过这些筛选框（我只创建了非常简单的 DataTables）。我注意到在一些文档中提到了 dataTables.htmlColumnFilter.js 插件，但我找不到下载该脚本的位置。 - ttubrian

非常感谢您的帮助。我基本上是按照这里的指示进行列过滤的。http://www.datatables.net/examples/api/multi_filter.html - dting

啊，我从未找到那个页面。让我看一下，然后回复你。 - ttubrian