Columna de filtro jQuery DataTables con operadores de comparación

Question

He estado utilizando el complemento jQuery de DataTables con el plugin de filtro, y es increíble. Sin embargo, me preguntaba si es posible filtrar las columnas de la tabla por fila usando un operador de comparación (por ejemplo, '<' '>' or '<>') antes de un valor en la entrada del filtro en la parte inferior de la tabla.

http://www.datatables.net/plug-ins/filtering#functions

hay manera de filtrar por rango usando campos de entrada que aceptan una max y valor min. Sin embargo, me gustaría renunciar a agregar dos campos de entrada adicionales y de alguna manera analizar la entrada de esta columna.

La fila que deseo filtrar se completa solo con valores enteros (edad).

algunos ejemplos de comportamiento: el deseo

input  results 
< 20  less than than 20 
> 20  greater than 20 
20 - 80 between 20 and 80 
<> 20  not 20 

Alguien tiene experiencia modificar el comportamiento del filtro plug-in para lograr este comportamiento? Gracias.

edición:

me gustaría ser capaz de escribir directamente en el operador de comparación en estos cuadros de entrada. Si se detecta un operador, se filtrará según el operador. Si no se detecta un operador de filtro, me gustaría que se filtre normalmente.

el código HTML de la entrada del filtro se ve así:

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

Gracias!

Answer 1

Los 3 pasos necesarios deben ser:

• crear la interfaz de usuario
• escribir una función de filtrado
• configurar eventos que revise la DataTable cuando la interfaz de usuario cambia

En primer lugar crear la interfaz de usuario . Para mí, la manera más fácil de captar la intención del usuario es utilizar una lista de selección donde el usuario puede elegir qué operador de comparación que quiere usar:

<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"> 

Ahora, es necesario impulsar una función en el conjunto de filtros . La función simplemente toma el operador de comparación especificado y lo usa para comparar los datos de fila con el valor ingresado. Debería volver verdadero si una fila debería permanecer visible y devolver falso si debería desaparecer según el filtro. Si el usuario no ingresa un número válido, devuelve verdadero. Cambiar el índice_columna en el valor adecuado:

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

Por último, en el punto donde se crea el DataTable, configurar eventos en sus elementos de interfaz de usuario que revise la mesa cuando el usuario hace cambios:

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

---

POR OTRO LADO, si desea que el usuario escriba el operador de comparación en lugar de seleccionarlo, deberá analizar su entrada.Si usted tiene una caja de texto simple:

<input type="text" id="filter"> 

A continuación, se analiza la entrada en una función de filtro de la siguiente manera:

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

y un documento listo: sólo se

$(document).ready(function() { 
    var oTable = $('#example').dataTable(); 
    /* Add event listeners to the filtering inputs */ 
    $('#filter').keyup(function() { oTable.fnDraw(); }); 
}); 

Este filtro funciona en enteros positivos Los decimales y el soporte numérico negativo requerirían más trabajo. También puede ampliar la función para agregar> = y < = soporte, o simplemente hacer que el comportamiento predeterminado para> y < dependa de las expectativas de su usuario.

También volví a conectar el detector de eventos a un cuadro de texto flotante de entrada libre. Intenté esto con una DataTable básica y funciona. Tendría que adjuntar el comportamiento a esos cuadros de texto en la parte inferior de sus columnas, pero no estoy seguro de cómo los consiguió allí. Nunca he hecho eso con una DataTable.