javascript DataTables (JQuery) 如何对给定包含数据的数组进行多列过滤文本框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8176699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DataTables (JQuery) on how to multi column filter text box given a array that contain the data?
提问by Anderson Karu
I am trying to do a multi column filter as shown in this page (http://www.datatables.net/examples/api/multi_filter.html) using a array that contain all the data (called 'my_array_data') but I could not get those filter text box displayed.
我正在尝试使用包含所有数据（称为“my_array_data”）的数组来执行本页（http://www.datatables.net/examples/api/multi_filter.html）中所示的多列过滤器，但我可以不显示那些过滤器文本框。
Below is the code:
下面是代码：
<script type="text/javascript">
var asInitVals = new Array();
$(document).ready(function() {
$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
var oTable = $('#example').dataTable( {
"aaData": my_array_data,
"bProcessing": true,
"bAutoWidth": false,
"fnInitComplete": function() {
var oSettings = this.fnSettings();
for ( var i=0 ; i<oSettings.aoPreSearchCols.length ; i++ ){
if(oSettings.aoPreSearchCols[i].sSearch.length>0){
$("tfoot input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
$("tfoot input")[i].className = "";
}
}
},
"aoColumns": [
{
"sTitle": "From",
"sClass": "center",
"sWidth": "10%"
},
{
"sTitle": "To",
"sClass": "center",
"sWidth": "10%"
},
{
"sTitle": "Note",
"sClass": "center",
"sWidth": "80%"
}
]
} );
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
});
For your info: I do not have a <table> ... </table>as mention before that I store my data in the array called ''my_array_data' and therefore do not have <input class="search_init"/>. Also, "my_array_data" contain three column - basically named as - "From", "To", and "Note".
供您参考：我<table> ... </table>之前没有提到我将数据存储在名为“my_array_data”的数组中，因此没有<input class="search_init"/>. 此外，“my_array_data”包含三列 - 基本上命名为 - “From”、“To”和“Note”。
Any Insight in getting 3 columns of search filter for my array "my_array_data"?
为我的数组“my_array_data”获取 3 列搜索过滤器的任何见解？
Appreciate any help offer.
感谢任何帮助提供。
采纳答案by Icarus
You need to define those 3 text boxes on your markup. Here's a shortened example of how I currently achieve the same thing using datatables:
您需要在标记上定义这 3 个文本框。这是我目前如何使用数据表实现相同目标的简短示例：
<table id="example">
<thead>
<tr>
<th class="theader">
Date
</th>
<th class="theader">
Delay
</th>
<th class="theader">
Status
</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th class="centered">
<input type="text" id="id1" name="id1" class="search_init" />
</th>
<th class="centered">
<input type="text" id="id2" name="id2" class="search_init" />
</th>
<th class="centered">
<input type="text" id="id3" name="id3" class="search_init" />
</th>
</tr>
</tfoot>
</table>
And my initialization code is something like:
我的初始化代码是这样的：
var oTable = $("#example").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"bSortClasses": false,
//...etc etc
});
$("tfoot input").keyup(function(event) {
/* Filter on the column (the index) of this element */
if (event.keyCode == 13)//only on enter pressed
{
var colIndex = getColumnIndex(this.id);//this is a custom function I wrote. Ignore it
oTable.fnFilter(this.value, colIndex);
}
});
回答by Noman ALi
@Anderson Karu yeah here is the sample for individual column filter above to header
@Anderson Karu 是的，这里是标题上方的单个列过滤器的示例
goto herehttp://jsfiddle.net/s8F9V/1/
goto herehttp://jsfiddle.net/s8F9V/1/
