a discesa DataTable filtro jquery

Question

Ecco il mio codice:

$(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 utilizzando il plugin datatables jQuery, il suo funzionamento perfettamente, proprio come questo esempio:

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

Quello che vorrei fare è piuttosto che avere un menu a discesa per ogni colonna vorrei un dropdown solo su una colonna specifica.

Quindi presumo che devo cambiare:

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

Ma non sono sicuro cosa mettere. Qualsiasi aiuto sarebbe molto apprezzato, grazie in anticipo.

Answer 1

Se è necessario solo su una colonna che si potrebbe fare

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

penso che qualcosa di simile in seguito potrebbe fare il trucco

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

È possibile utilizzare le tabelle di data filtro di colonna vedere http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html

È un plug-in di secondo livello per i datatables.

Jovan

Answer 4

È possibile utilizzare il 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

È inoltre possibile creare un elenco di selezione e posizionarlo ovunque ti piace di fuori della tabella.

<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

Forse i tempi sono cambiati, ma senza plug-in e l'utilizzo di dataTables1.10.12 ed è @api, come persona nei commenti ha suggerito, è possibile utilizzare l'intero indice di base zero da una matrice per la tabella corrispondente. Esempio di codice, i bit importanti sono on line 2 di seguito. Sto cercando solo sulla quarta colonna, e questo è coffeescript ma tu hai l'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