带有比较运算符的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个步骤应该是:

• 创建UI
• 写一个过滤功能
• 设置事件以在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(); } );
});

此过滤器仅适用于正整数.小数和负数支持需要更多工作.您还可以将函数扩展为添加> =和<= support,或者只是将这些设置为>和<的默认行为,具体取决于您的用户期望.

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