jQuery DataTables仅针对特定列进行过滤 [英] jQuery DataTables Filtering for Specific Columns Only
本文介绍了jQuery DataTables仅针对特定列进行过滤的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用jQuery插件数据表（ http://datatables.net ）进行分页，搜索功能和过滤。
有一个过滤器函数（ http://datatables.net/release-datatables/examples/api/multi_filter_select.html ），它为每个列放置表单选择元素。
我的问题是我不希望过滤器为每个列选择元素，只有一些。我修改了原始代码，只需要是/否过滤，我的第一列包含用户名。
如何从第一列中删除表单select元素？
JavaScript：
< script type =text / javascript>
$（document）.ready（function（）{
（function（$）{
/ *
*功能：fnGetColumnData
*目的：从特定的列返回一个表值的数组
*返回：数组字符串：1d数据数组
*输入：对象：oSettings - dataTable设置对象，这是过去最后一个参数函数
* int：iColumn - 从
* bool中提取数据的列的ID：bool：bUnique - 可选 - 如果设置为false，重复的值不会被过滤掉
* bool： bFiltered - 可选 - 如果设置为false，则使用所有表数据（不仅仅是过滤的）
* bool：bIgnoreEmpty - 可选 - 如果设置为false，则空值不会从结果数组中过滤
*作者：Benedikt Forchhammer< b.forchhammer / AT\ mind2.de>
* /
$ .fn.dataTableExt.oApi.fnGetColumnData = function（oSettings，iColumn，bUnique，bFiltered，bIgnoreEmpty）{
//检查我们有一列id
if（typeof iColumn ==undefined）return new Array（）;
//默认情况下，我们只需要唯一的数据
if（typeof bUnique ==undefined）bUnique = true;
//默认情况下，我们只想查看过滤数据
if（typeof bFiltered ==undefined）bFiltered = true;
//默认情况下，我们不希望包含空值
if（typeof bIgnoreEmpty ==undefined）bIgnoreEmpty = true;
//我们要循环的行列表
var aiRows;
//仅使用过滤行
if（bFiltered == true）aiRows = oSettings.aiDisplay;
//使用所有行
else aiRows = oSettings.aiDisplayMaster; //所有行号
//设置数据数组
var asResultData = new Array（）; $ var $ a
for（var i = 0，c = aiRows.length; i
var aData = this.fnGetData（iRow）;
var sValue = aData [iColumn];
//忽略空值？
if（bIgnoreEmpty == true&& sValue.length == 0）continue;
//忽略唯一值？
else if（bUnique == true&& jQuery.inArray（sValue，asResultData）> -1）continue;
// else将值推送到结果数据数组
else asResultData.push（sValue）;
}
返回asResultData;
}}（jQuery））;
函数fnCreateSelect（aData）
{
return'< select>< option value =>选择< / option>< option value =是>是< / option>< option value =否>否< / option>< / select>';
}
var oTable = $（'＃results'）。dataTable（{
sDom：'<<filtersf><clear ><topTp><clear> rt<bottomil>'，
iDisplayLength：5，
sPaginationType：full_numbers b $ bbSortCellsTop：true，
oLanguage：{
sSearch：搜索所有列：
}，
aoColumns：[
null，
{sType：title-string}，
{sType：title-string}，
{sType：title-string} ，
{sType：title-string}
]，
oTableTools：{
sSwfPath：../../scripts/TableTools/ copy_cvs_xls_pdf.swf
}
}）;
/ *为表脚注中的每个TH元素添加一个选择菜单* /
$（thead #filter td）each（function（i）{
this.innerHTML = fnCreateSelect（oTable.fnGetColumnData（i））;
$（'select'，this）.change（function（）{
oTable.fnFilter（$（this） （），i）;
}）;
}）;
}）;
< / script>
HTML：
code>< table id =resultsclass =display>
< thead>
< tr id =labels>
< 1> 1<
< th> 2< / th>
< 3> 3<
< th> 4<
< 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>
解决方案
您可以修改您的选择器以忽略第一个< td> 元素。每个匹配元素的索引应该比相应的列索引小1个。
/ *为每个TH元素添加一个选择菜单除了第一个表脚注* /
$（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> 元素，您可以执行类似于
每个（function（i）{
if（$（this）.hasClass（'filter'））{pre>
$（'th'，'#labels'
$（'td'，'#filter'）。eq（i）
.html（fnCreateSelect（oTable.fnGetColumnData（i）））
.find（'select'）
.change（function（）{oTable.fnFilter（$（this）.val（），i）;}）;
}
}）;
未测试，但您的想法：）
I am using the jQuery plugin DataTables (http://datatables.net) for pagination, search capabilities and filtering.
There is a filter function (http://datatables.net/release-datatables/examples/api/multi_filter_select.html) that places form select elements for each column.
My issue is that I don't want the filter select elements for every column, only some. I've modified the original code as I want Yes/No filtering only, and my first column contains user names.
How do I remove the form select element from the first column?
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>
解决方案
You can modify your selector to ignore the first <td> element. The index of each matched element should be 1 less than the corresponding column index.
/* 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 );
} );
});
If you wanted to be able to specify the column indexes for which you wanted a filter, one way would be to do something like
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 );
});
}
});
Or, if you wanted to control filters by adding a class .filter to any <th> element whose column you wanted to filter, you could do something like
$('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); });
}
});
Not tested, but you get the idea :)
这篇关于jQuery DataTables仅针对特定列进行过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
