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改变

首先创建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; 
    } 
); 

最后，在这里您创建数据表来看，当用户在您的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做过。