rangeFiltering via a hyperlink

sfgolfer

I would like to use the rangerFiltering plugin but not with input fields.

Instead, I would like to use hyperlinks to pass the min/max values to the filter.

Filtering examples:
1-10
11-20
21-30
etc

Is this possible?

My base code:

[code]
/* Custom filtering function which will filter data in column four between two values */
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iMin = document.getElementById('min').value * 1;
var iMax = document.getElementById('max').value * 1;
var iVersion = aData[3] == "-" ? 0 : aData[3]*1;
if ( iMin == "" && iMax == "" )
{
return true;
}
else if ( iMin == "" && iVersion < iMax )
{
return true;
}
else if ( iMin < iVersion && "" == iMax )
{
return true;
}
else if ( iMin < iVersion && iVersion < iMax )
{
return true;
}
return false;
}
);

$(document).ready(function() {
/* Initialise datatables */
var oTable = $('#example').dataTable();

/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
} );
[/code]

allan

I don't see why it wouldn't be. You'd just have click event handlers on the links which set the values for the filter and then draw the table. What have you tried thus far?

Allan

sfgolfer

I was able to get the links to work by adding click handlers. It may be a rather crude way of handling things but I don't have much JavaScript experience.

HTML:

[code]
0-9
10-19
[/code]

Event listeners:

[code]
jQuery(function($){
var oTable = $('#example').dataTable();

$( "#click1" ).click(function() {
click1Click = true;
click2Click = false;
});
$( "#click2" ).click(function() {
click1Click = false;
click2Click = true;
});
});
[/code]

Function:

[code]
/* Custom filtering function which will filter data between two values */
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if(click1Click || click2Click){
if(click1Click){
var iMin = 0;
var iMax = 9;
}
if(click2Click){
var iMin = 10;
var iMax = 19;
}

var iVersion = aData[1] == "-" ? 0 : aData[1]*1;
if ( iMin == "" && iMax == "" )
{
return true;
}
else if ( iMin == "" && iVersion < iMax )
{
return true;
}
else if ( iMin < iVersion && "" == iMax )
{
return true;
}
else if ( iMin < iVersion && iVersion < iMax )
{
return true;
}
return false;
}
else{
//return all records when there is no filtering
return true;
}

}
);
[/code]

allan

That looks like a fair approach to me. Thanks for share your solution with us.

Allan