jQuery DataTables仅过滤特定列

我使用jQuery插件DataTables（ http://datatables.net ）进行分页，搜索function和过滤。

有一个过滤函数（ http://datatables.net/release-datatables/examples/api/multi_filter_select.html ），它为每列放置表单选择元素。

我的问题是我不希望每列的filter选择元素，只有一些。 我修改了原始代码，因为我想要是/否过滤，我的第一列包含用户名。

如何从第一列中删除表单选择元素？

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  */ $.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 -1) continue; // else push the value onto the result data array else asResultData.push(sValue); } return asResultData; }}(jQuery)); function fnCreateSelect( aData ) { return 'SelectYesNo'; } var oTable = $('#results').dataTable({ "sDom": '<rt>', "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 ); } ); } ); } );  

HTML：

  ... 
 
 
 
1
 
2
 
3
 
4
 
5?
 
 
 
1
 
2
 
3
 
4
 
5?
 
 
 
  

Answer 1

您可以修改选择器以忽略第一个

元素。 每个匹配元素的索引应比相应的列索引小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添加到要过滤其列的任何

元素来控制filter，您可以执行类似的操作

 $('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

在根据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 = $('') .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( ''+d+'' ) } ); } ); }, } ); } ); 

但那么“每个人”还需要吗？ 以及如何定位多列？

Answer 3

我借用了亚特沃达的答案，使用此代码作为第一列：

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

并使用此代码更多：

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

在要跳过的tfoot列上，可以将其留空

Answer 4

最简单的方法是将它放在不需要的列中：

Answer 5

对于基本搜索，您可以从以下方面获得建

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

Answer 6

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

这是插入特定列filter的最佳方法。

 i - Is Number Of Coulmn. 

- *标签号必须等于列。

Answer 7

甚至有一种非常简单的方法：对于那些你不想过滤的列，只需

in

中将可见性设置为隐藏

in

示例：

 Something