Create dynamic datatable with column filters

fobos

I create the datatable dynamically using jquery with this code:
[code]
function addTab() {
var tab_title = $tab_title_input.val() || "Ricerca " + tab_counter;
$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title );

$('#archivio'+tab_counter+'.display').dataTable( {
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sDom": '<"H"lf>tr<"F"ip>',
"sAjaxSource": "../server_side/archivio.php",
"fnInitComplete": function () {
var
that = this,
nTrs = this.fnGetNodes();

/* input text per i filtri di ricerca */
$('#pnprincipale'+tab_counter).keyup( function () {
$('#archivio'+tab_counter).fnFilter( $(this).val(), 0 );
} );
$('#pnsecondario'+tab_counter).keyup( function () {
$('#archivio'+tab_counter).fnFilter( $(this).val(), 1 );
} );
$('#foglio'+tab_counter).keyup( function () {
$('#archivio'+tab_counter).fnFilter( $(this).val(), 2 );
} );
$('#revisione'+tab_counter).keyup( function () {
$('#archivio'+tab_counter).fnFilter( $(this).val(), 3 );
} );
}
} );

mytheme();

tab_counter++;
}
[/code]

At the start of my page, initialize the table with this code:

[code]
var tableat;
tableat = $('#archivio.display').dataTable( {
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sDom": '<"H"lf>tr<"F"ip>',
"sAjaxSource": "../server_side/archivio.php",
"fnInitComplete": function () {
var
that = this,
nTrs = this.fnGetNodes();

$('#pnprincipale').keyup( function () {
tableat.fnFilter( $(this).val(), 0 );
} );
$('#pnsecondario').keyup( function () {
tableat.fnFilter( $(this).val(), 1 );
} );
$('#foglio').keyup( function () {
tableat.fnFilter( $(this).val(), 2 );
} );
$('#revisione').keyup( function () {
tableat.fnFilter( $(this).val(), 3 );
} );

}
} );

[/code]

When you create a new tab is created normally the new table but filters do not work on the new table. Some help? Thanks in advance.

fobos

Any idea?

fobos

UP!

fobos

News.
I deleted the code and I have referred to other examples. The current code is:
[code]
function addTab() {
var tab_title = $tab_title_input.val() || "Ricerca " + tab_counter;
$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title );

var tableat;
tableat = $('#archivio'+tab_counter).dataTable( {
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sDom": '<"H"lf>tr<"F"ip>',
"sAjaxSource": "../server_side/archivio.php",
"fnInitComplete": function () {
var
that = this,
nTrs = this.fnGetNodes();

var asInitVals = new Array();

$(".filtri input").keyup( function () {
tableat.fnFilter( this.value, $(".filtri input").index(this) );
} );

$(".filtri input").each( function (i) {
asInitVals[i] = this.value;
} );

$(".filtri input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

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

mytheme();
tab_counter++;
}
[/code]

When I click on the Add button tab search (Ricerca) everything works, I reply in the new table and filters content . Only the first tab that research work, in others not. But if I close the first tab I second the search for work but not the third. Closing the second third I work and so on.

How can I fix this? Give me some other solution to create multiple search forms on the same table? the goal is to create a tab for each ricarca in this tab should be, and table filters. Thanks in advance.

fobos

Fire bug error : oSettings.aoPreSearchCols[iColumn] is undefined

fobos

Nobody have idea? Allan?