Filtering using multiselect dropdown lists. How to limit conflicting filter options?

gzhu

By following the select menu filtering example (http://datatables.net/release-datatables/examples/api/multi_filter_select.html), I was able to incorporate the ECH multiselect widget (http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/) into datatable. And it works pretty well. One thing I am still trying to figure out, and would like to solicit some suggestions, is how to update the filter menus to limit conflicting choices that cause everything to get filtered.

Don't know how to post a screenshot, so I'll try to give a scenario.
Take the browser matrix table used throughout this site. If the user first filter by Rendering Engine and select "Presto", and "KHTML".
The table will be reduced. But under Platforms, it would not make sense to allow the user to further filter by any "OSX*" options. Because it would blank the table.

I thought about disabling/hiding options from the dropdowns that are not present in the current filtered table. But that would not always work. If the user first filters by "KDE 3.1" under platforms, they would not be able to select any other options under platforms to expand the results.

I need some help figuring out how to leave only options in the updated table that would yield different but non-empty results.

Hope this makes sense to somebody. Thanks!

magalie55

The post is old but if someone else need to do it, one way to go about it:
- move the code initializing the select into the fnDrawCallback
- change the fnCreateSelect method by adding a selected parameter so as to gives user feedback on which column was filtered

It would gives something like :
[code]
function fnCreateSelect( aData, aSelected )
{
var r='', i, iLen=aData.length;
for ( i=0 ; i

binro01

I tried to do the above by moving the initializing of the select into the fnDrawCallback and had a problem.

The main issue I'm having is that that when I originally draw the multiSelect element, I create a special filtering rule via afnFiltering.push so each MultiSelect I create works in concert with each other.

Here is my Original code with out a redraw after each click of a multiSelect option. This works well. I know there is a lot going on here. I'm using the column Filter plugin for From/To filtering on columns, tooltips and now the multiSelects on any row where I can.

[code]
(function($) {
$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
// check that we have a column id
if ( typeof iColumn == "undefined" ) return new Array();

// by default we only wany unique data
if ( typeof bUnique == "undefined" ) bUnique = true;

// by default we do want to only look at filtered data
if ( typeof bFiltered == "undefined" ) bFiltered = true;

// by default we do not wany to include empty values
if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;

// list of rows which we're going to loop through
var aiRows;

// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers

// set up data array
var asResultData = new Array();

for (var i=0,c=aiRows.length; i -1) continue;

// else push the value onto the result data array
else asResultData.push(sValue);
}

return asResultData;
}}(jQuery));

function fnCreateSelect( aData, myColumnID )
{
var mySelectID = 'select_' + myColumnID;
var r='', i, iLen=aData.length;
var sortedArray = new Array();
var numericFlag = 'Y';
for ( i=0 ; i]+)>)/ig,"");
myData = myData.replace( /.*?>/g, "" );
myData = myData.replace( /.*?>/g, "" );
myData = jQuery.trim( myData );
if (myData != '')
{
if (isNaN(myData)==true)
{
numericFlag = '';
}
sortedArray[i] = myData;
}
}
sLen=sortedArray.length
if (numericFlag == 'Y')
{
sortedArray = sortedArray.sort(function(a,b){return a-b});
}
else
{
sortedArray = sortedArray.sort();
}
for ( i=0 ; i