TO BE TESTED - [addon] i made a function to add checkbox list filter in drop down menu via button

[GoogleCodeExporter]

Hi i made this function to add a toggle checklist that accept multiple values 
as input in OR (if you check 2 elements you will see the matching results of 
both).

It's my first js script so it could be better...sorry about that.

the functions is attached in the file "columnFilter.checkbox.js".
this should be added to the main js script (jquery.dataTables.columnFilter.js).

then in the switch near lines 340 add this case:

case "checkbox":
     fnCreateCheckbox(oTable, aoColumn.values);
     break;

it will accept arrays of values just like "select".

example:

$('#table').dataTable().columnFilter(
{aoColumns: [
{ type: "checkbox", values: [ 'NAME1', 'NAME2']  },
{ type: "select", values: [ 'Gecko', 'Trident'] } ]});

Important you need to add this style:

  <style type="text/css">

    .toggle-check {
         overflow: auto; 
         clear: both; 
         bottom:10%;
         left:0;
         text-align: left;
         position: absolute; 
         z-index: 99997;
    }

  </style>

P.S. if the main developer wants i could merge it via SVN.

Original issue reported on code.google.com by setm...@gmail.com on 8 Jul 2011 at 9:28

Attachments:

• columnFilter.checkbox.js

[GoogleCodeExporter]

sorry for being verbose....

i made a patch proposal at

http://code.google.com/p/jquery-datatables-column-filter/issues/detail?id=17

Original comment by setm...@gmail.com on 8 Jul 2011 at 9:40

[GoogleCodeExporter]

Original comment by joc...@gmail.com on 24 Sep 2011 at 9:59

• Changed state: Accepted

[GoogleCodeExporter]

Issue 17 has been merged into this issue.

Original comment by joc...@gmail.com on 25 Sep 2011 at 9:39

[GoogleCodeExporter]

Hi,

I have merged issue 17 and this issue. Thanks for your code, I have included it 
in the latest verison of the plugin however I have problem with this. 
Could you check on the 
http://jquery-datatables-column-filter.googlecode.com/svn/trunk/checkbox.html 
have I properly added your code?

Regards,
Jovan

Original comment by joc...@gmail.com on 25 Sep 2011 at 9:41

• Changed title: TO BE TESTED - [addon] i made a function to add checkbox list filter in drop down menu via button

[GoogleCodeExporter]

Hi,

i made some changes in the while. Patch Attached.

Div approach was bad looking in some cases, due to positioning. I changed it to 
a dialog, added a reset button (single column) and fixed the search putting it 
in OR.

I added also a var used to override the button name (if you want to visualize 
something like "Filters" on it).

example for "sFilterButtonText: 'Filters'":
        <script type="text/javascript" charset="utf-8">
            $(document).ready( function () {
                $('#example').dataTable().columnFilter({
                    sFilterButtonText: 'Filters',
                    aoColumns: [{ type: "checkbox", values: [ 'Gecko', 'Trident'] },{},{},{},{ type: "checkbox", values: [ 'A', 'C']  } ]});
            } );
        </script>

Let me know if you think that something could be handled better.

Luca

Original comment by setm...@gmail.com on 26 Sep 2011 at 10:20

Attachments:

• checkboxDialog

[GoogleCodeExporter]

Hi Luca,

Thanks for this code is looks much better. However, could you plese try to 
improve it a little bit? Suggestions are:
1. Postion - instead of center postion could you place the dialog aligned with 
his filter button? I believe that JQuery UI positioning 
http://jqueryui.com/demos/position/ might be usefull here
2. Reset button - could you place it as a button dialog along with close 
button? See http://jqueryui.com/demos/dialog/#modal-confirmation
3. It would be nice to add animation to dialog (something like slide up or 
slide down - see http://jqueryui.com/demos/dialog/#animated)
4. I have no idea how this can be displayed but it would be nice if current 
filtered options could be shwn somewhere - currently user cannot see what is 
filter condition once dialog is closed.
5. Is there a chance to enable user to specifu AND or OR condition for the 
checkbox list? Eiter via additional checkbox or at least in the server 
confguration.
6. Currently when you select both A and C, the "C/A" cell is also shown. I'm 
not sure is this an error or we can say that this is expected behavior.

Culd you please send me the whole fle - it is easier for me to compare it with 
my working version because I have some uncommited changes locally and you are 
patchin version you see on the svn.

Thanks,
Jovan

Original comment by joc...@gmail.com on 26 Sep 2011 at 10:52

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Hi, 
I have made some of the mentioned changes. If you are still interested in 
improving this functionality could you take the latest version and use it as a 
starting point?

Jovan

Original comment by joc...@gmail.com on 29 Sep 2011 at 11:35

[GoogleCodeExporter]

Hi Luca,

I have made few additional changes e.g. now if you do not specify checkbox 
values, plugin will take the values from the column. I will not make any 
updates to this functionality - let me know if you will adjust anytjing else 
and i will merge it into the code.

Thank you for this feature.

Jovan

Original comment by joc...@gmail.com on 30 Sep 2011 at 4:11

• Changed state: Fixed