Javascript DataTables（JQuery）如何在给定包含数据的数组的情况下对文本框进行多列筛选？

我正在尝试使用包含所有数据的数组（称为“my_array_data”）执行本页（）所示的多列筛选，但无法显示这些筛选文本框

代码如下：

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


});

var asInitVals=新数组（）；
$（文档）.ready（函数（）{
$（'#dynamic'）.html（''）；
var oTable=$（'#示例'）。数据表（{
“aaData”：我的数组数据，
“bProcessing”：正确，
“bAutoWidth”：假，
“fnInitComplete”：函数（）{
var oSettings=this.fnSettings（）；
对于（var i=0；i0）{
$（“tfoot输入”）[i].value=oSettings.aoPreSearchCols[i].sSearch；
$（“tfoot输入”）[i].className=“”；
}
}
},
“aoColumns”：[
{
“缝线”：“从”，
“sClass”：“中心”，
“瑞士”：“10%”
},
{
“针”：“到”，
“sClass”：“中心”，
“瑞士”：“10%”
},
{
“针”：“注”，
“sClass”：“中心”，
“瑞士”：“80%”
}
]
} );
$（“tfoot输入”）.keyup（函数（）{
/*筛选此元素的列（索引）*/
oTable.fnFilter（this.value，$（“tfoot输入”）.index（this））；
} );
/*
*支持为中的文本框提供一点“用户友好性”的功能
*页脚
*/
$（“tfoot输入”）。每个（函数（i）{
asInitVals[i]=该值；
} );
$（“tfoot输入”）.focus（函数（）{
if（this.className==“search\u init”）
{
this.className=“”；
此值为“”；
}
} );
$（“tfoot输入”）.blur（函数（i）{
如果（this.value==“”）
{
this.className=“search\u init”；
this.value=asInitVals[$（“tfoot输入”）.index（this）]；
}
} );
});

请注意：我没有

如前所述，我将数据存储在名为“my_array_data”的数组中，因此没有

。此外，“my_array_data”包含三列，基本命名为“From”、“To”和“Note”

在为我的数组“my_array_data”获取3列搜索筛选器方面有什么见解吗

---

感谢您的帮助。

您需要在标记上定义这3个文本框。下面是我目前如何使用datatables实现相同功能的一个简短示例：

<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>

---

@Anderson Karu yeah这是标题上方单个列过滤器的示例

---

转到这里

谢谢伊卡洛斯，你的编码工作。但是，我注意到页脚并没有放在dataTable的每一列的正下方。有什么见解吗？@AndersonKaru:也许你在复制/粘贴时出错了？我看到在我的表头（

thead

）上定义了3列，在我的表尾（

tfoot

）上定义了3列。我不明白他们怎么会错位。实际上，我删除了所有的

thead

，因为我注意到，如果我放置

thead

，我的

thead

的所有先前格式以及每列中的所有数据都不像我之前使用的

“sClass”：“center”，

任何防止其触及我的格式的细节`？是否可以将单个列搜索置于标题（或列标题）上方？@icarus能否请您提供custome函数代码

getColumnIndex（this.id）

这正是我要找的。但是，您的JSFIDLE在IE11上不起作用。有没有一种方法可以让IE11实现这一点？

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