jQuery DataTables Filtrado solo para columnas específicas

Question

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

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

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

¿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

Usted puede modificar su selector de ignorar el primer elemento de <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 quería ser capaz de especificar los índices de columnas para el que quería un filtro, una solución 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 bien, si desea controlar los filtros mediante la adición una clase .filter a cualquier elemento <th> cuya columna que quería filtrar, se 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 se ha probado, pero usted consigue la 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); 
    }); 
}); 

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

i - Is Number Of Coulmn. 

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

Answer 3

para la búsqueda básica se puede obtener 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 4

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

<input type="hidden"> 

Answer 5

En la versión actual de acuerdo con http://www.datatables.net/examples/api/multi_filter_select.html, para una columna, 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 es "cada" aún se necesita ¿entonces? ¿Y cómo dirigirse a múltiples columnas?

Answer 6

I secundada respuesta mate voda, utilice este código para la primera columna:

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

y utilizar este código para más:

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

En la columna de la tfoot que desea saltar, se puede dejarlo en blanco

Answer 7

Incluso hay una manera muy fácil: para las columnas que no desea filtrar simplemente establezca la visibilidad en oculto de <th> in <tfoot> Ejemplo:

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