filtrage des données jQuery pour des colonnes spécifiques uniquement
J'utilise le plugin jQuery DataTables ( http://datatables.net ) pour la pagination, les capacités de recherche et le filtrage.
Il existe une fonction de filtrage ( http://datatables.net/release-datatables/examples/api/multi_filter_select.html ) qui place des éléments de sélection de formulaire pour chaque colonne.
Mon problème est que je ne veux pas que le filtre sélectionne des éléments pour chaque colonne, seulement certains. J'ai modifié le code d'origine car je souhaite un filtrage Oui/Non uniquement, et ma première colonne contient des noms d'utilisateur.
Comment puis-je supprimer l'élément de sélection de formulaire de la première colonne?
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>
Vous pouvez modifier votre sélecteur pour ignorer le premier élément <td>. L'index de chaque élément mis en correspondance doit être inférieur de 1 à l'index de colonne correspondant.
/* 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 );
} );
});
Si vous voulez pouvoir spécifier les index de colonne pour lesquels vous voulez un filtre, vous pouvez faire quelque chose comme:
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 );
});
}
});
Ou, si vous souhaitez contrôler les filtres en ajoutant une classe .filter à un élément <th> dont vous souhaitez filtrer la colonne, vous pouvez procéder comme suit:
$('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 testé, mais vous avez l'idée :)
Dans la version actuelle selon http://www.datatables.net/examples/api/multi_filter_select.html , pour une colonne, j'ai eu de la chance avec 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>' )
} );
} );
},
} );
} );
Mais est-ce que "chaque" est toujours nécessaire? Et comment cibler plusieurs colonnes?
J'ai appuyé Matt Voda answer, utilisez ce code pour la première colonne:
this.api().column( [0] ).every
et utilisez ce code pour plus:
this.api().column( [0,1,2] ).every
Sur la colonne tfoot que vous voulez ignorer, vous pouvez la laisser vide
Le moyen le plus simple est de mettre ceci pour les colonnes inutiles:
<input type="hidden">
pour une recherche de base, vous pouvez vous faire une idée:
$('tbody tr').addClass('visible');
$('thead tr th input:text').keyup(function(event) {
if (event.keyCode == 27 || $(this).val() == '')
{ ``$('tbody tr td ').show();
}
}
Il existe même un moyen très simple: Pour les colonnes que vous ne souhaitez pas filtrer, il vous suffit de définir la visibilité masquée de <th> in <tfoot> Exemple:
<th style="visibility: hidden;">Something</th>
$("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 );
});
});
C'est le meilleur moyen d'insérer un filtre pour une colonne spécifique.
i - Is Number Of Coulmn.
<th></th> - * Le nombre d'étiquettes doit être égal à celui des colonnes.