Hidden Column Filtering

Hidden Column Filtering

skopestudiosskopestudios Posts: 2Questions: 0Answers: 0
edited July 2012 in General
I'm working on a survey reporting page that presents the user with a piechart of results and the datatable below. The user needs to be able to click on a slice of the pie and view the filtered results in the table.

I'm including all answers in the datatable and then hiding the majority of columns for appearance sake.

The way I envisage I'd achieve this is to have 3 hidden form fields and when the user clicks on the pie segemnt, it defines the column number and the data range to filter by. At the moment, I'm just trying to get it working with visible text fields.

The HTML is:
[code]








ID
Location
Employee Name
Employer Rating
Business Rating
Date
Comments
<!-- HIDDEN COLUMNS -->
Full Comments
Q3
Q4
Q5
Q6
Q7
Q8
Q9
Q10
Q11
Q12
Q13
Q14



<!-- ROWS OUTPUT HERE -->



[/code]


The Javascript before the closing body tag...

[code]




$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iMin = document.getElementById('rangeLower').value * 1;
var iMax = document.getElementById('rangeUpper').value * 1;
var iColumnID = document.getElementById('rangeColumn').value;
var iColumn = aData[iColumnID] == "-" ? 0 : aData[iColumnID]*1;
if ( iMin == "" && iMax == "" )
{
return true;
}
else if ( iMin == "" && iColumn < iMax )
{
return true;
}
else if ( iMin < iColumn && "" == iMax )
{
return true;
}
else if ( iMin < iColumn && iColumn < iMax )
{
return true;
}
return false;
}
);


$(document).ready(function() {

var oTable = $('#table-results').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aoColumnDefs": [{ "bVisible": false, "aTargets": [7,8,9,10,11,12,13,14,15,16,17,18,19] }],
"fnDrawCallback": function(){
$('#table-results tbody tr').click(function() {
var responseID = $(this).attr('id');
document.location.href = "results.php?a=v&r=" + responseID;
});
$('#table-results tbody tr').hover(function() {
$(this).css('cursor', 'pointer');
}, function() {
$(this).css('cursor', 'auto');
});
}
});
/* Add event listeners */
$('#rangeLower').keyup( function() { oTable.fnDraw(); } );
$('#rangeUpper').keyup( function() { oTable.fnDraw(); } );
$('#rangeColumn').keyup( function() { oTable.fnDraw(); } );

});

[/code]


Unfortunately this is returning an error:

[code]
$.fn.dataTableExt is undefined
[/code]


I'd appreciate any help or suggestions on this one?

Replies

  • skopestudiosskopestudios Posts: 2Questions: 0Answers: 0
    edited July 2012
    DEBUG CODE: ezibam


    removing the "defer" attributes from the script tags appears to have fixed the undefined error however changing the value in the input fields now return:

    [code]
    oTable.fnDraw is not a function
    [/code]

    Current Javascript Code
    [code]



    $.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
    var iMin = document.getElementById('rangeLower').value * 1;
    var iMax = document.getElementById('rangeUpper').value * 1;
    var iColumnID = document.getElementById('rangeColumn').value;
    var iColumn = aData[iColumnID] == "-" ? 0 : aData[iColumnID]*1;
    if ( iMin == "" && iMax == "" )
    {
    return true;
    }
    else if ( iMin == "" && iColumn < iMax )
    {
    return true;
    }
    else if ( iMin < iColumn && "" == iMax )
    {
    return true;
    }
    else if ( iMin < iColumn && iColumn < iMax )
    {
    return true;
    }
    return false;
    }
    );

    $(document).ready(function() {

    var oTable = $('#table-results').dataTable({
    "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    "aoColumnDefs": [{ "bVisible": false, "aTargets": [7,8,9,10,11,12,13,14,15,16,17,18,19] }],
    "fnDrawCallback": function(){
    $('#table-results tbody tr').click(function() {
    var responseID = $(this).attr('id');
    document.location.href = "results.php?a=v&r=" + responseID;
    });
    $('#table-results tbody tr').hover(function() {
    $(this).css('cursor', 'pointer');
    }, function() {
    $(this).css('cursor', 'auto');
    });
    }
    });
    /* Add event listeners */
    $('#rangeLower').keyup( function() { oTable.fnDraw(); } );
    $('#rangeUpper').keyup( function() { oTable.fnDraw(); } );
    $('#rangeColumn').keyup( function() { oTable.fnDraw(); } );

    });

    [/code]
This discussion has been closed.