jQuery DataTables Filtro solo per colonne specifiche

Question

Sto utilizzando il plug-in jQuery DataTables (http://datatables.net) per l'impaginazione, le funzionalità di ricerca e il filtro.

C'è una funzione di filtro (http://datatables.net/release-datatables/examples/api/multi_filter_select.html) che inserisce gli elementi di selezione per ciascuna colonna.

Il mio problema è che non voglio che gli elementi di selezione del filtro per ogni colonna, solo alcuni. Ho modificato il codice originale perché desidero Sì/No solo filtraggio e la mia prima colonna contiene nomi utente.

Come rimuovere l'elemento di selezione modulo dalla prima colonna?

JavaScript:

<script type="text/javascript"> 

$(document).ready(function() { 

(function($) { 
/* 
* Function: fnGetColumnData 
* Purpose: Return an array of table values from a particular column. 
* Returns: array string: 1d data array 
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function 
*   int:iColumn - the id of the column to extract the data from 
*   bool:bUnique - optional - if set to false duplicated values are not filtered out 
*   bool:bFiltered - optional - if set to false all the table data is used (not only the filtered) 
*   bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array 
* Author: Benedikt Forchhammer <b.forchhammer /AT\ mind2.de> 
*/ 
$.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) { 
    // check that we have a column id 
    if (typeof iColumn == "undefined") return new Array(); 

    // by default we only want unique data 
    if (typeof bUnique == "undefined") bUnique = true; 

    // by default we do want to only look at filtered data 
    if (typeof bFiltered == "undefined") bFiltered = true; 

    // by default we do not wany to include empty values 
    if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true; 

    // list of rows which we're going to loop through 
    var aiRows; 

    // use only filtered rows 
    if (bFiltered == true) aiRows = oSettings.aiDisplay; 
    // use all rows 
    else aiRows = oSettings.aiDisplayMaster; // all row numbers 

    // set up data array 
    var asResultData = new Array(); 

    for (var i=0,c=aiRows.length; i<c; i++) { 
     iRow = aiRows[i]; 
     var aData = this.fnGetData(iRow); 
     var sValue = aData[iColumn]; 

     // ignore empty values? 
     if (bIgnoreEmpty == true && sValue.length == 0) continue; 

     // ignore unique values? 
     else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue; 

     // else push the value onto the result data array 
     else asResultData.push(sValue); 
    } 

    return asResultData; 
}}(jQuery)); 


function fnCreateSelect(aData) 
{ 
    return '<select><option value="">Select</option><option value="Yes">Yes</option><option value="No">No</option></select>'; 
} 

    var oTable = $('#results').dataTable({ 
     "sDom": '<<"filters"f><"clear"><"top"Tp><"clear">rt<"bottom"il>>', 
     "iDisplayLength": 5, 
     "sPaginationType": "full_numbers", 
     "bSortCellsTop": true, 
     "oLanguage": { 
        "sSearch": "Search all columns:" 
      }, 
     "aoColumns": [ 
       null, 
       { "sType": "title-string" }, 
       { "sType": "title-string" }, 
       { "sType": "title-string" }, 
       { "sType": "title-string" } 
      ], 
     "oTableTools": { 
      "sSwfPath": "../../scripts/TableTools/copy_cvs_xls_pdf.swf" 
     }   
    }); 


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

HTML:

<table id="results" class="display"> 
    <thead> 
     <tr id="labels"> 
      <th>1</th> 
      <th>2</th> 
      <th>3</th> 
      <th>4</th> 
      <th>5?</th> 
     </tr> 
     <tr id="filter"> 
      <td>1</td> 
      <td>2</td> 
      <td>3</td> 
      <td>4</td> 
      <td>5?</td> 
     </tr> 
    </thead> 
    <tbody> 
    ... 
    </tbody> 
</table> 

Answer 1

È possibile modificare il selettore di ignorare il primo elemento <td>. L'indice di ciascun elemento abbinato dovrebbe essere 1 in meno rispetto all'indice della colonna corrispondente.

/* Add a select menu for each TH element except the first in the table footer */ 
$("thead #filter td:not(:eq(0))").each(function (i) { 
    var columnIndex = i + 1; 
    this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(columnIndex)); 
    $('select', this).change(function() { 
     oTable.fnFilter($(this).val(), columnIndex); 
    }); 
}); 

Se si voleva essere in grado di specificare gli indici delle colonne per il quale si voleva un filtro, in un modo potrebbe essere quello di fare qualcosa di simile

var filterIndexes = [3, 4]; 
$('td', '#filter').each(function (i) { 
    if ($.inArray(i, filterIndexes) != -1) { 
     this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
     $('select', this).change(function() { 
      oTable.fnFilter($(this).val(), i); 
     }); 
    } 
}); 

Oppure, se si voleva controllare i filtri con l'aggiunta di una classe .filter a qualsiasi elemento <th> cui colonna si voleva filtrare, si potrebbe fare qualcosa di simile

$('th', '#labels').each(function(i) { 
    if ($(this).hasClass('filter')) { 
     $('td', '#filter').eq(i) 
      .html(fnCreateSelect(oTable.fnGetColumnData(i))) 
      .find('select') 
      .change(function() { oTable.fnFilter($(this).val(), i); }); 
    } 
});  

Non testato, ma si ottiene l'idea :)

Answer 2

$("tfoot th").each(function (i) { 
    if(i>=3 && i<=6) 
    this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i)); 
    $('select', this).change(function() { 
    oTable.fnFilter($(this).val(), i); 
    }); 
}); 

Questo è il modo migliore per inserire il filtro per colonna specifica.

i - Is Number Of Coulmn. 

<th></th> - * Tags numero deve essere uguale delle colonne.

Answer 3

per la ricerca di base è possibile ottenere un'idea da:

$('tbody tr').addClass('visible'); 


$('thead tr th input:text').keyup(function(event) {  



    if (event.keyCode == 27 || $(this).val() == '') 
     { ``$('tbody tr td ').show(); 
    } 
    } 

Answer 4

Il modo più semplice è mettere questo per le colonne non necessarie:

<input type="hidden"> 

Answer 5

Nella versione attuale secondo http://www.datatables.net/examples/api/multi_filter_select.html, per una colonna, ho è stato fortunato con this.api().column(0).every:

$(document).ready(function() { 
    $('#mytable').DataTable({ 
     initComplete: function() { 
      this.api().column(0).every(function() { 
       var column = this; 
       var select = $('<select><option value=""></option></select>') 
        .appendTo($(column.header()).empty()) 
        .on('change', function() { 
         var val = $.fn.dataTable.util.escapeRegex($(this).val()); 
         column 
          .search(val ? '^'+val+'$' : '', true, false) 
          .draw(); 
        }); 
       column.data().unique().sort().each(function (d, j) { 
        select.append('<option value="'+d+'">'+d+'</option>') 
       }); 
      }); 
     }, 
    }); 
}); 

Ma "ogni" è ancora necessario poi? E come scegliere come target più colonne?

Answer 6

ho distaccati opaca voda risposta, utilizzare questo codice per la prima colonna:

this.api().column([0]).every 

e utilizzare questo codice per più:

this.api().column([0,1,2]).every 

Sulla colonna tfoot che si desidera saltare, voi può lasciarlo vuoto

Answer 7

C'è anche un modo molto semplice: per quelle colonne che non vuoi filtrare basta impostare la visibilità a nascosto di <th> in <tfoot> Esempio:

<th style="visibility: hidden;">Something</th>