DataTables logo DataTables

via Ad Packs
ColumnFilterWidgets Plug-in
  • cyberhobocyberhobo
    Posts: 7
    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.
  • LenWrightLenWright
    Posts: 6
    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!
  • allanallan
    Posts: 15,495
    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
  • cyberhobocyberhobo
    Posts: 7
    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_noronhajp_noronha
    Posts: 59
    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 :)
  • cyberhobocyberhobo
    Posts: 7
    @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.
  • allanallan
    Posts: 15,495
    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
  • cyberhobocyberhobo
    Posts: 7
    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!
  • allanallan
    Posts: 15,495
    Oops - thanks for spotting the link error! Now corrected :-). Also the updated readme is really nice and clear - thanks for doing that!

    Regards,
    Allan
  • polytrikspolytriks
    Posts: 1
    Cyberhobo - thanks for this, works great. Any chance of adding functionality to allow this to work with server side loading of data?
  • cyberhobocyberhobo
    Posts: 7
    @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!
  • studiolelandstudioleland
    Posts: 20
    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.
  • cyberhobocyberhobo
    Posts: 7
    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.
  • allanallan
    Posts: 15,495
    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
  • cyberhobocyberhobo
    Posts: 7
    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!
  • allanallan
    Posts: 15,495
    :-) 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
  • rolperezrolperez
    Posts: 7
    can i work with ranges with this plugin?

    Thanks!
  • mshermsher
    Posts: 2
    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.
  • bpelhosbpelhos
    Posts: 3
    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.
  • allanallan
    Posts: 15,495
    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
  • AiorusAiorus
    Posts: 1
    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:
    if ( oColumn.bVisible && sExcludeList.indexOf( '|' + i + '|' ) < 0 ) {

    To:
    if ( sExcludeList.indexOf( '|' + i + '|' ) < 0 ) {

    Best regards, and thanks for the great plugin!
  • MbdesignMbdesign
    Posts: 8
    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
  • MbdesignMbdesign
    Posts: 8
    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.
  • MbdesignMbdesign
    Posts: 8
    how is it possible to use ColumnFilterWidgets with Serverside processing?
  • ironvictoryironvictory
    Posts: 1
    I also need to get ColumnFilterWidgets working with Serverside processing
  • jp_noronhajp_noronha
    Posts: 59
    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.
  • allanallan
    Posts: 15,495
    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
  • MbdesignMbdesign
    Posts: 8
    did somebody have a working server_side_proccessing script for that great plugin?
  • SurajSuraj
    Posts: 2
    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?
  • MbdesignMbdesign
    Posts: 8
    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?
  • allanallan
    Posts: 15,495
    Use a plug-in such as: http://datatables.net/plug-ins/sorting#numeric_comma
  • AJNormanAJNorman
    Posts: 1
    Any idea how to space out the hyperlinks when making multiple selections?

    The hyperlinks are staying on one line and there is no space between them.

    Also, the filter boxes are going down the page and not across the page like the example.
  • OsirisOsiris
    Posts: 36
    @AJNorman : it seems like you didn't include the css that's provided in ColumnFilterWidgets.
  • OsirisOsiris
    Posts: 36
    I've got server-side running :
    http://datatables.net/forums/discussion/11991#Item_1
  • Alexs6Alexs6
    Posts: 2
    Thank you veeery much! Great job! Both DataTables and ColumnFilterWidgets.

    Does anyone knows how to get ColumnFilterWidgets working when using fnRender function to display not just value, but some kind of html like this:

      "aoColumns": [
      {
          "sName": "User",
          "mDataProp": "User",
          "fnRender": function (oObj) { return '<a href="#">' + oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp] + '</a>' ; } 
  
      },

    When using filter all records just dissapear. Common sorting works perfectly, but filtering does not. Any suggestions?
  • Alexs6Alexs6
    Posts: 2
    Ammm, i found the solution myself. Maybe it will be usefull for somebody(javascript newbies like me+_+), who is using MVC3.
    So, the problem is that fnGetColumnData function returns not the needed value, but the full html(i.e <a href="" >Some value</a> ) To be able to filter correctly, function must return just "Some value". So i`v changed the code like this:
       
 for (var i = 0, c = aiRows.length; i < c; i++) {
            iRow = aiRows[i];
            sValue = $('<div>' + this.fnGetData(iRow, iColumn) + '</div>').text();
            // ignore empty values?
            if (bIgnoreEmpty == true && sValue.length == 0) continue;

            // ignore unique values?
            else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;

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

    $.text allows us to ignore html and get only text value. In the result filtering goes well. Enjoy.
Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Support

Get useful and friendly help straight from the source.

Categories

In this Discussion