Фильтр отдельных столбцов с данными jquery

Question

Я использую отдельную фильтрацию столбцов на вкладке пользовательского интерфейса jquery. Для первой вкладки все фильтры работают нормально, но для второй вкладки фильтрация ведет себя странно. На второй вкладке, когда столбцов мало, отдельные фильтры работают нормально, но как только я увеличиваю количество столбцов для таблицы, фильтрация столбцов перестает работать. На обеих вкладках отлично работает фильтрация на уровне главной таблицы. Обратите внимание, что я использую django в шаблоне, и все данные поступают напрямую из базы данных (без 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>

Пожалуйста, кто-нибудь, дайте мне знать, где я делаю неправильно .. Также дайте мне знать, достаточно ли предоставленной информации или нет ..