javascript - propiedades - jQuery DataTables Filtering para columnas específicas solamente

jquery datatable column filter select

Question

Estoy utilizando el plugin jQuery DataTables ( http://datatables.net ) para la paginación, las capacidades de búsqueda y el filtrado.

Hay una función de filtro ( http://datatables.net/release-datatables/examples/api/multi_filter_select.html ) que coloca elementos de selección de formulario para cada columna.

Mi problema es que no quiero que el filtro seleccione elementos para cada columna, solo algunos. He modificado el código original porque solo quiero el filtro Sí / No, y mi primera columna contiene nombres de usuarios.

¿Cómo elimino el elemento de selección de formulario de la primera columna?

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

En la versión actual de http://www.datatables.net/examples/api/multi_filter_select.html , para una columna, tuve suerte 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>'' )
} );
} );
},
} );
} );

Pero, ¿se sigue necesitando "todo"? ¿Y cómo apuntar a múltiples columnas?

Answer 2

Incluso hay una forma muy sencilla: para esas columnas que no desea filtrar, simplemente establezca la visibilidad en oculta de <th> in <tfoot> Ejemplo:

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

Answer 3

La forma más fácil es poner esto para columnas innecesarias:

<input type="hidden">

Answer 4

Para búsquedas básicas puedes tener una idea de:

$(''tbody tr'').addClass(''visible'');
$(''thead tr th input:text'').keyup(function(event) {
if (event.keyCode == 27 || $(this).val() == '''')
{ ``$(''tbody tr td '').show();
}
}

Answer 5

Puede modificar su selector para ignorar el primer elemento <td> . El índice de cada elemento coincidente debe ser 1 menos que el índice de columna correspondiente.

/* 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 quisiera poder especificar los índices de columna para los que quería un filtro, una forma sería hacer algo como

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

O, si desea controlar los filtros agregando un .filter clase a cualquier elemento <th> cuya columna desea filtrar, podría hacer algo como:

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

No probado, pero te dan la idea :)

Answer 6

Respaldé la respuesta de voda mate, use este código para la primera columna:

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

y usa este código para más:

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

En la columna tfoot que desea omitir, puede dejarla en blanco

Answer 7

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

Esta es la mejor manera de insertar un filtro para una columna específica.

i - Is Number Of Coulmn.

<th></th> - * El número de etiquetas debe ser igual a Columnas.