desplegables tablas de datos jquery filtro

Question

Aquí está mi código:

$(document).ready(function() { 
    /* Initialise the DataTable */ 
    var oTable = $('#example').dataTable({ 
     "oLanguage": { 
      "sSearch": "Search all columns:" 
     }, 
     "iDisplayLength": 10, 
     "bJQueryUI": true, 
     "sPaginationType": "full_numbers", 
     "bFilter": true, 
    }); 

    /* Add a select menu for each TH element in the table footer */ 
    $("thead th").each(function (i) { 
     this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
     $('select', this).change(function() { 
      oTable.fnFilter($(this).val(), i); 
     }); 
    });   
}); 

Im usando el plugin tablas de datos jQuery, su funcionamiento perfectamente al igual que este ejemplo:

http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

lo que me gustaría hacer es en lugar de tener un menú desplegable para cada columna, me gustaría un menú desplegable solo en una columna específica.

así que supongo que tengo que cambiar:

$("thead th").each(function (i) { 

pero no estoy seguro de qué poner. Cualquier ayuda sería muy apreciada, gracias de antemano.

Answer 1

Si necesita sólo en una columna que podría hacer

var indexOfMyCol = 2;//you want it on the third column 
$("thead th").each(function (i) { 
    if(i === indexOfMyCol){ 
     this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
     $('select', this).change(function() { 
     oTable.fnFilter($(this).val(), i); 
     }); 
    } 
}); 

Answer 2

creo que algo como siguiente podría hacer el truco

$("thead th").each(function (i) { 
    if(i==1) 
    { 
     this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
     $('select', this).change(function() { 
      oTable.fnFilter($(this).val(), i); 
     }); 
    } 
}); 

Answer 3

Se pueden utilizar tablas fecha filtro de columna ver http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html

Es un complemento de segundo nivel para tablas de datos.

Jovan

Answer 4

Usted puede utilizar el plugin columnfilter ...

$(document).ready(function(){ 
    $('#example').dataTable() 
      .columnFilter({ 
      aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }, 
        { type: "text" }, 
        null, 
        { type: "number" }, 
      { type: "select" } 
       ] 

     }); 
}); 

Answer 5

También puede crear su propia lista de selección y la posición donde le parezca fuera de la tabla.

<select id="mySelect"> 
    <option value=""></option> 
    <option value="1">1</option> 
    ... 
</select> 

<script> 
    $('#mySelect').on('change',function(){ 
     var selectedValue = $(this).val(); 
     oTable.fnFilter("^"+selectedValue+"$", 0, true); //Exact value, column, reg 
    }); 
<script> 

Answer 6

Tal vez los tiempos han cambiado, pero sin plugin y utilizando dataTables1.10.12 y es @api, como una persona en los comentarios sugirió, puede utilizar el número entero índice basado en cero a partir de una matriz para la tabla correspondiente. Código de ejemplo, los bits importantes están en la línea 2 a continuación. Estoy buscando solo en la cuarta columna, y esto es coffeescript pero entiendes la idea.

$('#example').DataTable initComplete: -> 
        @api().columns([3]).every -> 
          column = this 
          select = $('<select><option value="">Sort Column(All)</option></select>').appendTo($(column.header()).empty()).on('change', -> 
            val = $.fn.dataTable.util.escapeRegex($(this).val()) 
            column.search(val ? '^'+val+'$' : '', true, false).draw() 
            return 
          ) 
          column.data().unique().sort().each (d, j) -> 
            select.append '<option value="' + d + '">' + d + '</option>' 
            return 
          return 
        return