Problem with individual column filtering (select menus)

mjay

Hi,

I've just tried to implement the column filtering using select menus.

It seems there is a problem with the data, because the option tags which are generated, look like this:

base data:
href= /ressourcen/organisationen/supportakteure/afc_consultants_international.html
title= AFC Consultants International

generated code:
[code]
AFC Consultants International">AFC Consultants International
[/code]

You can see it live here:

http://mikrofinanzwiki.de.dd15616.kasserver.com/ressourcen/literatur/buecher-fuer-den-ersten-einstieg/index.html

I need help and I hope someone has an idea or solution

Thanks

M

allan

Hello!

Thanks for the link :-). I think the issue is basically that the filter selection is trying to set HTML inside an HTML attribute - which is generally a bad idea (as you can see :-) ). What you could try is the following:

[code]
function fnCreateSelect( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; i/g, "" );
r += ''+stripped+'';
}
return r+'';
}
[/code]
which will strip out the HTML before putting it into the option. I think this will allow it to work as expected, although I'm not 100% certain before of the impact of the HTML tags on the filtering. If you could give it a go and let us know, that would be great!

Regards,
Allan

mjay

Hey Alan,

I've tried it and it work's great, on this page, I've found no errors anymore:

http://mikrofinanzwiki.de.dd15616.kasserver.com/ressourcen/literatur/buecher-fuer-den-ersten-einstieg/

But I've found a similar problem on this page:
http://mikrofinanzwiki.de.dd15616.kasserver.com/ressourcen/organisationen/

There are some entry's in the select field which are broken, could you take another look?

Thanks so much.

Martin

mjay

Just one information:

One Column in my source code looks like this:

[code]
<?php echo $organization['name']; ?>
<?php echo $type; ?>
<?php echo $organization['place']; ?>
[/code]

In this case the variables have the following values:

organization[name] = Activists for Social Alternatives (ASA)
organization[place] = Indien
type = Implementierungsakteure und/oder Mikrofinanzinstitutionen in Entwicklungs- und Schwellenl

allan

Hi Martin,

There are a couple of new line characters in your HTML which is tripping up the remove HTML regex. If you should the following, this should do it:

[code]
function fnCreateSelect( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; i/g, "" );
r += ''+stripped+'';
}
return r+'';
}
[/code]
Allan

mjay

Hello Allan,

wow, now it's working and all lines look correct. Thanks so much for your Code samples.

I final question, is it possible to display only one item in the select list, if there are more than one?

As you can see here, I have a column called "Sitz" with Countrys, but many country's are listed 2 or three times:
http://mikrofinanzwiki.de.dd15616.kasserver.com/ressourcen/organisationen/

Is it possible to display every country only 1 time? I need this for all columns and I think that's the idea you've had with this list.

Thanks so much again

M

allan

Hi Martin,

Certainly is possible :-) If you have a look at the source for fnGetColumnData ( http://datatables.net/plug-ins/api#fnGetColumnData ) the second parameter (which is optional) is a unique flag. Just set that to true and that will give you only unique values - i.e. fnGetColumnData( 1, true );

Allan

mjay

Hi Allan,

I already tried this, I changed the following line:

[code]
// by default we only want unique data
if ( typeof bUnique == "undefined" ) bUnique = false;
[/code]

But it isn't working, or is it working on your side? Maybe the js is already cached here?

Greetings

M

allan

Did you change it to 'true' when undefined? It is certainly still as you've pasted above at the moment. I'd suggest leave leaving the plug-in source as is and passing the second parameter as true.

Allan

mjay

Hello Allan,

no i changed it to false if undefined, it looks like the following in the source code right now:

[code]
// by default we only want unique data
if ( typeof bUnique == "undefined" ) bUnique = false;
[/code]

It was true before I've changed it to false.

Could you please give advice, what to change? Am I doing it on the wrong line?

Thanks :)

M

allan

Oh I see. Ah - I think I've just realised what the issue is. The fnGetColumnData function is correct - but your data is non-unique due to the links, which it is processing. Change the line above back to bUnique = true, and then modify this line:

[code]
var sValue = aData[iColumn];
[/code]

to be:
[code]
var sValue = aData[iColumn].replace('\n','').replace( /<.*?>/g, "" );
[/code]
and that should do it.

Allan

mjay

Hello Allan,

that's it, now it is working and we've no duplicated values. ;-)

But one last thing. ;-) How can i sort the displayed values in the select field from A-Z?

At the moment it's unsorted.

Many thanks again, I will hit the donate button again, for you great work!

Thanks Thanks Thanks!

M

allan

Good to hear that worked :-)

If you replace this line:

[code]
return asResultData;
[/code]
with:

[code]
asResultData.sort();
return asResultData;
[/code]
that will give you a sorted array which the select create will then use.

Regards,
Allan

mjay

Okay, fine. :)

This also works now. ;-)

I've found one little issue, which happens because of the german language.

If you have a look here:
http://mikrofinanzwiki.de.dd15616.kasserver.com/ressourcen/organisationen

The Third column ist for the Country, the last 3 Country's are beginning with

allan

The sort I added in there is just the built in sorting method that is available in Javascript. You can do a case insensitive sort with something like this:

[code]
asResultData.sort( function ( a, b ) {
var x = a.toLowerCase();
var y = b.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
} );
[/code]
The issue you have with umlauts is a little bit more tricky... The reason for that is that those characters are numerically much higher in UTF (or latin-1) so sort higher. There is meant to be a locale aware sort in Javascript, but it is not widely supported. As a result, when needs to be done is to replace the umlaut characters with there 'regular' ones like:

[code]
var a.replace('

allan

[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/g, "" );

// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;

var a=sValue.split(', ');
for ( var j=0, jLen=a.length ; j -1) continue;

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

return asResultData;
}}(jQuery));
[/code]
Allan

mjay

Hello Alan,

I've tried it, but nothing happened. My js file actually looks like this:

[code]
(function($) {
/*
* Function: fnGetColumnData
* Purpose: Return an array of table values from a particular column.
* Returns: array string: 1d data array
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function
* int:iColumn - the id of the column to extract the data from
* bool:bUnique - optional - if set to false duplicated values are not filtered out
* bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
* bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
* Author: Benedikt Forchhammer
*/
$.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/g, "" );

// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;

var a=sValue.split(', ');
for ( var j=0, jLen=a.length ; j -1) continue;

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

asResultData.sort( function ( a, b ) {
var x = a.toLowerCase();
var y = b.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
} );


return asResultData;
}}(jQuery));

function fnCreateSelect( aData )
{
var r='', i, iLen=aData.length;
for ( i=0 ; i/g, "" );
r += ''+stripped+'';
}
return r+'';
}
[/code]

Do you have an idea?

Thanks for your time, Greets

Martin

allan

Hi Martin,

I just ran that code on your site and issued the following command:

[code]
fnCreateSelect( $('#jtable').dataTable().fnGetColumnData( 2 ) );
[/code]
and it built a select list without duplicates as I would expect. So as far as I can see it runs okay. The select menus in your table appear to be okay for me as well. Did you remember to clear your browser's cache?

Regards,
Allan

Mbdesign

Did someboady have an idea to sort integer

like
8
9
10

at the moment it looks like this

10
8
9

Regards Markus