2 datatables & 2 filters on the same page

pearly_030

Hi,

Is it possible to have 2 tables, on the same page, separatly filtered ?

For example, (to make short) I have one input filter date in a formular and I want that :
- the first table displays all data with date > input filter date
- The second table displays all data with date < input filter date.

I think that the solution is in the
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex )
but I don't know how to do.

I would like to have something like this :
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iMin = document.getElementById("min").value;
var iDebut1 = aData[3]; .......(from oTable1)
var iDebut2 = aData[4]; .......(from oTable2)

if ( iMin > iDebut1 )
{return true;} ...... for oTable1
else {return false} ...... for oTable1

if ( iMin < iDebut2 )
{return true;} ...... for oTable2
else {return false} ...... for oTable2

});
[/code]

Thanks

fbas

When you filter, only the table attached to the filter textbox (or other element) will receive the filter function call.

yes, you can have more than one table and more than one filter. they will be separate.

if you use afnFiltering, you will use it with an instance of a table, so only that table will be affected.

if you want to specify more than one filtering function like afnFiltering, you can. just have unique names for any function you add to the dataTableExt.

pearly_030

Thanks fbas !
The code would like this ?
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if ( oSettings.nTable != document.getElementById( 'oTable1' ))
{
// Filtering code
}
if ( oSettings.nTable != document.getElementById( 'oTable2' ))
{
// Filtering code
}
}
);
[/code]
Can you confirm please ?
Many thanks !

fbas

I think that should work.

I did make some mistakes in the post above, but I think you got it right.

pearly_030

This is not the good result.
In fact filter is applied on the 2 tables.
I think the solution isn't far but I don't find :-(

[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if ( oSettings.nTable != document.getElementById( 'oTable1' ))
{
var iMin = document.getElementById("min").value;
var iDebut = aData[3];
if ( iMin > iDebut)
{ return true;}
return false;
}
if ( oSettings.nTable != document.getElementById( 'oTable2' ))
{
var iMin = document.getElementById("min").value;
var iDebut = aData[3];
if ( iMin < iDebut)
{ return true;}
return false;
}
}
);
[/code]

Have you got an idea ?

GregP

I have to admit to not quite getting the full picture, but I can't help suspecting that you're still trying to combine two things into 1, where those two things should be separate. As fbas points out, you need to have 2 completely separate tables. Each will have its own filter, and you will push to each separately.

Without (admittedly) understanding all of the code above, it looks like you are trying to use just one object with two different dataTables IDs. Everything needs to be based on two separate DT objects, not just their IDs.

fbas

I think he can make it work with the code above. But he will need to set up handlers to trigger the other table when one table filters.

pearly_030

Hi,

I "find" (thanks to fbas) the solution.
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if ( oSettings.nTable == document.getElementById( 'ireservees' ))
.......
{
if ( oSettings.nTable == document.getElementById( 'reservees' ))
.......
{
}
);
[/code]
where reservees and ireservees are table's names.

Many thanks fbas.