Individual column filtering (using "input" elements) in multiple tables

fernandonaim

Help!

How to put the filter in two different tables on the same page?

Thank you!

allan

How have you tried doing it?

Please see: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read .

Allan

fernandonaim

I have 3 tables:

[code]


var asInitVals = new Array();
$(document).ready(function() {

$("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 = "";
this.background = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );



$(document).ready(function() {
oTable = $('#tabListaProfFaseOrcamentos').dataTable({
"bPaginate": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [ [1,'asc'], [3,'asc'] ],
"aoColumns": [
{"bSortable": false},
null,
null,
{"sType": "uk_date"},
{"sType": "uk_date"},
null ]

});
});

$(document).ready(function() {
oTable = $('#tabListaEquiFaseOrcamentos').dataTable({
"bPaginate": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [ [1,'asc'], [3,'asc'] ],
"aoColumns": [
{"bSortable": false},
null,
null,
{"sType": "uk_date"},
{"sType": "uk_date"},
null ]

});
});

$(document).ready(function() {
oTable = $('#tabListaMatFaseOrcamentos').dataTable({
"bPaginate": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [ [1,'asc'], [2,'asc'] ],
"aoColumns": [
{"bSortable": false},
null,
{"sType": "uk_date"},
{"sType": "uk_date"},
null,
null,
null ]

});
});


[/code]


In assembling the tables are more or less like this: (changing the ID of the table)

[code]




Ações
Categoria
Fase
Empresa
Início
Fim
Valor
















<?php echo $dados['nome_TbCategFase'];?>
<?php echo $dados['nome_TbFases'];?>
<?php echo $dados['nome_TbTerceiros'];?>
<?php echo date('d/m/Y', strtotime($dados['dtInicio_TbOrcamentoFases']));?>
<?php echo date('d/m/Y', strtotime($dados['dtFim_TbOrcamentoFases']));?>
<?php echo $dados['vlrTotal_TbOrcamentoFases'];?>














[/code]

But while filtering the first table it messes at last.

allan

You assign the variable `oTable` three times. Only the last one is actually used, since that was the last one assigned! You need to use different variables.

Allan

fernandonaim

Already like to thank the help. Thank you!

Okay put different names:

[code]
oTable1 = $('#tabListaProfFaseOrcamentos').dataTable
...












oTable2 = $('#tabListaEquiFaseOrcamentos').dataTable
...












oTable3 = $('#tabListaMatFaseOrcamentos').dataTable
...











[/code]

But the only working oTable1;
I think we have to change the js below:

[code]
var asInitVals = new Array();
$(document).ready(function() {

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable1.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 = "";
this.background = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
[/code]

You know how it is?

fernandonaim

People anyone have a solution?