Question

我在jquery UI选项卡中使用单独的列过滤。对于第一个选项卡，所有过滤器工作正常，但对于第二个选项卡，过滤行为很奇怪。在第二个选项卡中，当列数很少时，各个过滤器工作正常，但只要我增加表的列数，它就会停止列过滤。两个选项卡中的主表级过滤工作正常。请注意，我在模板中使用django，所有数据都直接来自数据库（No Ajax）。

#jquery
$(document).ready(function(){
var oTable=$("#tableId2").dataTable(
{
"bPaginate": true,
"bLengthChange": true,
"bJQueryUI": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bRetrieve":true,
"bAutoWidth": true,
"aoColumns": [
null,
null,
null,
null,
null,
null,
null

]
});

var asInitVals = new Array();
$("tfoot input").keyup( function () {
oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
oTable.fnSettings(), $("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)];
}
} );
});

#HTML
<table border="1" id="tableId2">
<thead>

<tr>
<th>
Name
</th>

<th>
Email Address
</th>

<th>
Contact Number
</th>

<th>
Skill Set
</th>

<th>
Stage
</th>

<th>
Status
</th>
</tr>
</thead>

<tbody>
{% for candidate_record in candidate_result %}
<tr>

<td>{{candidate_record.first_name}} {{candidate_record.last_name}}</td>

<td>{{candidate_record.email_address}}</td>

<td>{{candidate_record.contact_number}}</td>

<td>{{candidate_record.skill_set}}</td>

<td>{{candidate_record.stage}}</td>

<td>{{candidate_record.status}}</td>
</tr>
{% endfor %}
</tbody>

<tfoot>
<tr>
<th><input type="text" name="search_first_name" value="Search First Name" class="search_init" /></th>
<th><input type="text" name="search_email" value="Search Email" class="search_init" /></th>
</tr>
</tfoot>

</table>

请有人让我知道我在哪里做错了。如果给出的信息是否足够，请告诉我。

jquery数据表单个列过滤器

0 个答案: