jQuery DataTables Filtrowanie tylko dla określonych kolumn

Question

Używam tabel danych wtyczek jQuery (http://datatables.net) do stronicowania, możliwości wyszukiwania i filtrowania.

Istnieje funkcja filtra (http://datatables.net/release-datatables/examples/api/multi_filter_select.html), która umieszcza elementy zaznaczania formularza dla każdej kolumny.

Mój problem polega na tym, że nie chcę, aby filtry wybierały elementy dla każdej kolumny, tylko niektóre. Zmodyfikowałem oryginalny kod tak, jak chcę tylko filtrować Tak/Nie, a moja pierwsza kolumna zawiera nazwy użytkowników.

Jak usunąć element wyboru formularza z pierwszej kolumny?

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

Można zmodyfikować wybieraka zignorować pierwsze <td> element. Indeks każdego dopasowanego elementu powinien być o 1 mniejszy niż odpowiedni indeks kolumny.

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

Jeśli chcesz być w stanie określić indeksy kolumn, dla którego chcieli filtr, jednym ze sposobów byłoby zrobić coś takiego

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

Lub, jeśli chce kontrolować filtry dodając klasa .filter do dowolnego elementu <th> którego kolumna chcesz filtrować, można zrobić coś jak

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

nie testowano, ale masz pomysł :)

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

To jest najlepszy sposób na wstawienie filtra dla konkretnej kolumny.

i - Is Number Of Coulmn. 

<th></th> - * Liczba znaczników musi być równa Kolumn.

Answer 3

dla wyszukiwania podstawowego można uzyskać pomysł z:

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


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



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

Answer 4

Najłatwiej jest umieścić to do niepotrzebnych kolumn:

<input type="hidden"> 

Answer 5

w obecnej wersji według http://www.datatables.net/examples/api/multi_filter_select.html, na jednej kolumnie, I szczęście: 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>') 
       }); 
      }); 
     }, 
    }); 
}); 

Ale "zawsze" jest potrzebne następnie? A jak kierować reklamy na wiele kolumn?

Answer 6

I oddelegowany matowy voda odpowiedź, użyj tego kodu dla pierwszej kolumnie:

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

i użyć tego kodu na więcej:

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

na kolumnie TFOOT który chcesz pominąć, ty może zostawić puste

Answer 7

Istnieje nawet bardzo prosty sposób: dla tych kolumn, których nie chcesz filtrować, ustaw widoczność ukrytą <th> in <tfoot> Przykład:

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