ColumnFilterWidgets Plug-in

cyberhobo

Hi all,

I have an open source plugin to share: https://github.com/cyberhobo/ColumnFilterWidgets

I'm a little intimated by the prospect of keeping it up to date with the amazing DataTables library, but I guess some of you out there might want to help! Inspired by the column menu filtering example

http://datatables.net/release-datatables/examples/api/multi_filter_select.html

I wrote the ColumnFilterWidgets for DataTables 1.7.x to create a more powerful column-based menus that allow multiple delimited menu items in a table cell, and multiple selections. It powers the tables you can play with in the publications search refine area on the Congressional Hunger Center site:

http://www.hungercenter.org/subjects/advocacy-and-education/

I invite all to use and contribute to the code, though I'll have limited time to work on it myself.

LenWright

This looks really nice, although I'm still too new to dataTables to jump on this just yet. I'll seek this out a little later - nice job!

allan

Looks fantastic! I'll have a good play with it this evening :-).

Thanks very much for taking the time to release this as open source!

Regards,
Allan

cyberhobo

I hope this gives a little boost back to DataTables. DataTables certainly boosted our project!

For anyone interested, I encourage you to try the examples. This requires you to put the code in DataTabes/extras/ColumnFilterWidgets in a DataTables tree, then open the HTML examples.

jp_noronha

i have given up column filter because could put it to work in my class object, it forces me to have complex headers or apply it on footer. thanks to you i believe i can put this feature in my project.

if i may i would like to give a suggestion. your link to the hunger center provides an example that could be an improvement to the plugin. Do you think possible to create a parameter that, if true, instead of designing the column filters like you give in the example it could design them as in the page of hunger center?

anyway thks for a great plugin of a great plugin :)

cyberhobo

@jp_noronha - the hunger center code only does a few things outside of the ColumnFilterWidgets code. You should be able to view the source of that page and copy that if you'd like to do a similar implementation.

allan

Hi cyberhobo,

Sorry I've not had a chance to look at your plug-in a more closely until now. I have to say you've done a fantastic job on integrating this into the DataTables "style" of presenting your examples and code! I really like the cumulative filtering feature, and the ability to remove a filter with a single click - really very nice!

I've just put up a link from the "extras" page to your plug-in ( http://datatables.net/extras/#ColumnFilterWidgets ) as I'm sure that the community will hugely appreciate your work on this. I've also cloned your git repo onto this server so that I could link directly to running examples (the "examples" link in the "Extras" table. If you would like the description or any other point changed, please do just let me know!

I wonder if I might make two suggestions for your plug-in:

1. Might it be possible to include a list of the options that are available for the plug-in in your readme and say what each one does? Just a central documentation point.

2. Did you consider adding an option for a "clear all" filters? If there are a lot of filters on the table, then this might be useful. *Edit* - I see that there is a reset button on your example web-page, is this in the plug-in and I just missed it?

Regards,
Allan

cyberhobo

That's great to be on the DataTables website. The only issue I notice is that the first ColumnFilterWidgets link in the the Third Party Plug-ins table links to ColReorderWithResize.

I've updated the README as suggested, and also linked to the new page.

For the clear all suggestion I created an issue: https://github.com/cyberhobo/ColumnFilterWidgets/issues/1

Thanks!

allan

Oops - thanks for spotting the link error! Now corrected :-). Also the updated readme is really nice and clear - thanks for doing that!

Regards,
Allan

polytriks

Cyberhobo - thanks for this, works great. Any chance of adding functionality to allow this to work with server side loading of data?

cyberhobo

@polytriks - good! I still need to learn how use DataTables with server loading, but of course it sounds like a great feature. Let's create an issue for that too:

https://github.com/cyberhobo/ColumnFilterWidgets/issues/2

Feel free to implement it!

studioleland

Loving this addon. Seems not to work with the hidden columns function (bVisible: false). Any ideas on how to make this play nice. Would love to be able to filter via hidden meta data.

cyberhobo

If I'm not mistaken, DataTables doesn't offer filter filtering on hidden columns. I use CSS to hide columns that I want to use for filtering.

allan

Actually visibility (bVisible) and filtering (bSearchable) are handled independently by DataTables - it should be perfectly possible to filter on a hidden column. It might be that you need to convert from the visible column index into the data column index in order to be able to cope with this - there are two built in functions _fnVisibleToColumnIndex and _fnColumnIndexToVisible which are useful for that kind of thing.

Allan

cyberhobo

Thanks for setting me straight on that Allan - I was thrown off by not seeing invisible columns in the DOM, but clearly they are still searchable. Fun!

allan

:-) The way DataTables works is that it will remove any hidden elements from the document's DOM, with the result in generally speeding things up a bit (particularly with larger tables). Some older browsers do funky things with display:none on columns / rows as well...

DataTables holds an internal cache of the data, so it doesn't make any difference to the searching if the cell is visible or not, since it isn't directly looking at the DOM (which really would be slow).

Allan

rolperez

can i work with ranges with this plugin?

Thanks!

msher

Is there a way to show a page with some fields showing predefined filter values?
I need this to provide for referring the page viewer to a specific set of records.

bpelhos

The current nightly version of DataTables doesn't work with ColumnFilterWidgets.
The problem is located in DataTables: fnGetData(iRow) function always returns all rows, and not the specified row.

allan

Good shout - thank you for flagging this up! I've just committed a suitable fix for the problem and the nightly is up-to-date with this fix.

Regards,
Allan

Aiorus

I can't use Git, but the change to allow hidden columns to be filtered is the following
In file ColumnFilterWidgets.js

Line 115
From:
[code]if ( oColumn.bVisible && sExcludeList.indexOf( '|' + i + '|' ) < 0 ) {[/code]

To:
[code]if ( sExcludeList.indexOf( '|' + i + '|' ) < 0 ) {[/code]

Best regards, and thanks for the great plugin!

Mbdesign

Hi, can someboady help me to use the selected values in a session.
I want to built in my onlineshop a global productfilter.
The problem at the moment, if you change the page the filter reset to default.

Regards,
Markus

Mbdesign

And another problem i have is the order of options values in the select.

8
8,5
9
9,5
10
10,5
an so on

in the the select the order by is default and 10 comes before 8.

looks like

10
10,5
8
8,5
9
9,5

I can´t find a solution :-(

the table comes NOT out of erverside processing.

Mbdesign

how is it possible to use ColumnFilterWidgets with Serverside processing?

ironvictory

I also need to get ColumnFilterWidgets working with Serverside processing

jp_noronha

Mbdesign

The problem with the order in the select is because is thinking of the values as strings. And also StateSave is not ready to deal with column filters, for that you must use the necessary funtions to had them inside the cookie.

joao noronha.

allan

The filtering state of the individual column filters are actually stored in the cookie - but it appears that the plug-in doesn't read and use that information. There is already a feature request for this on the plug-ins github page: https://github.com/cyberhobo/ColumnFilterWidgets/issues/6 . Perhaps someone would like to fork and implement it?

Regarding server-side processing, I'd suggest opening a feature request for the plug-in: https://github.com/cyberhobo/ColumnFilterWidgets/issues .

Allan

Mbdesign

did somebody have a working server_side_proccessing script for that great plugin?

Suraj

Friends,
This widget is not able to filter columns with Images (i.e. columns having icons eg. 'Status' column).
Can it filter using 'alt' attribute?

Mbdesign

now fnSort was included "issue4"

but i can´t find a solution to fix the following problem:

the options of my select look like that

10
10,5
8
8,5
9
9,5


but i need

8
8,5
9
9,5
10
10,5

what can i do?

allan

Use a plug-in such as: http://datatables.net/plug-ins/sorting#numeric_comma