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做過。