僅針對特定列jQuery DataTables過濾

Question

我正在使用jQuery插件DataTable（http://datatables.net）進行分頁，搜索功能和過濾。

有一個過濾器函數（http://datatables.net/release-datatables/examples/api/multi_filter_select.html），它爲每列放置選擇元素。

我的問題是，我不希望過濾器爲每列選擇元素，只有一些。我修改了原始代碼，因爲我只需要是/不過濾，而我的第一列包含用戶名。

如何從第一列中刪除表單select元素？

的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

您可以修改您選擇忽略第一<td>元素。每個匹配元素的索引應小於相應的列索引1。

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

如果你希望能夠指定哪個你想過濾的列索引，一個方法是像做

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

或者，如果你想通過增加控制過濾器一類.filter任何<th>元素，它的列你想過濾，你可以不喜歡

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

沒有測試，但你的想法:)

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

這是爲特定列插入過濾器的最佳方法。

i - Is Number Of Coulmn. 

<th></th> - *標籤數量必須等於列。

Answer 3

基本搜索，你可以得到的想法：

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


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



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

Answer 4

最簡單的方法是把這個對於不需要的列：

<input type="hidden"> 

Answer 5

在當前版本中根據http://www.datatables.net/examples/api/multi_filter_select.html，一列，我與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>') 
       }); 
      }); 
     }, 
    }); 
}); 

但是是「每一個」仍然需要然後？以及如何定位多個列？

Answer 6

我借調亞光沃達答案，可以使用此代碼爲第一列：

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

，並使用此代碼的更多：

​​

您要跳過TFOOT列，可以留下空白

Answer 7

甚至有一個非常簡單的方法： 對於那些你不想過濾的列只需設置隱藏的可見性<th> in <tfoot> 例如：

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