Cumulative filtering does not work correctly with chosen #344

therealdjryan · 2016-08-30T17:50:48Z

Here is some sample code showing that cumulative filtering doesn't reduce the select options when yadcf is configured with select-type:'chosen'

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8/>
    <title>Yet Another DataTables Column Filter (yadcf) Showcase</title>
    <link rel="stylesheet" type="text/css" href="https://harvesthq.github.io/chosen/chosen.css"/>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="application/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
    <script type="application/javascript" src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
    <script type="application/javascript" src="jquery.dataTables.yadcf.js"></script>
    <link rel="stylesheet" type="text/css" href="cumulative_filtering.js" />

    <script type="application/javascript">
        var oTable;
        $(document).ready(function () {
            'use strict';
            oTable = $('#example').DataTable();
            yadcf.init(oTable,
                    [
                        {
                            column_number: 0,
                            filter_type: "multi_select",
                            select_type: 'chosen'
                        },
                        {
                            column_number: 3,
                            filter_type: "multi_select",
                            select_type: 'chosen'
                        },
                        {
                            column_number: 4,
                            filter_type: "multi_select",
                            select_type: 'chosen',
                            column_data_type: "html",
                            html_data_type: "text",
                            filter_default_label: "Select tag"
                        }
                    ],
                    {
                        cumulative_filtering: true
                    }
            );
        })
    </script>
    <!--<script type="text/javascript" src="resources/js/shCore.js"></script>-->
    <!--<script type="text/javascript" src="resources/js/shBrushJScript.js"></script>-->

</head>
<body>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
    <tr>
        <th>Some Data</th>
        <th>Numbers</th>
        <th>Dates</th>
        <th>Values</th>
        <th>Tags</th>
    </tr>
    </thead>
    <tbody>
    <tr class="odd gradeX">
        <td>Some Data 1</td>
        <td>1000</td>
        <td>01/24/2014</td>
        <td>a_value,b_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
    </tr>
    <tr class="even gradeC">
        <td>Some Data 2</td>
        <td>22</td>
        <td>02/20/2014</td>
        <td>b_value,c_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
    </tr>
    <tr class="odd gradeA">
        <td>Some Data 3</td>
        <td>33</td>
        <td>02/26/2014</td>
        <td>a_value</td>
        <td><span class="label lightblue">Tag2</span><span class="label lightblue">Tag3</span></td>
    </tr>
    <tr class="even gradeA">
        <td>Some Data 4</td>
        <td>44</td>
        <td>02/11/2014</td>
        <td>b_value</td>
        <td><span class="label lightblue">Tag2</span></td>
    </tr>
    <tr class="odd gradeA">
        <td>Some Data 5</td>
        <td>55</td>
        <td>02/29/2014</td>
        <td>a_value,b_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
    </tr>
    <tr class="even gradeA">
        <td>Some Data 1</td>
        <td>111</td>
        <td>11/24/2014</td>
        <td>c_value,d_value</td>
        <td><span class="label lightblue">Tag2</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 2</td>
        <td>222</td>
        <td>02/03/2014</td>
        <td>e_value,f_value</td>
        <td><span class="label lightblue">Tag3</span><span class="label lightblue">Tag4</span><span
                class="label lightblue">Tag5</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 3</td>
        <td>33</td>
        <td>02/03/2014</td>
        <td>a_value,bb_value</td>
        <td><span class="label lightblue">Tag5</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 4</td>
        <td>444</td>
        <td>03/24/2014</td>
        <td>a_value,f_value</td>
        <td><span class="label lightblue">Tag4</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 5</td>
        <td>55</td>
        <td>03/22/2014</td>
        <td>a_value,c_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 1</td>
        <td>300</td>
        <td>02/20/2014</td>
        <td>a_value,b_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 2</td>
        <td>242</td>
        <td>02/04/2014</td>
        <td>d_value,aa_value</td>
        <td><span class="label lightblue">Tag1</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 3</td>
        <td>703</td>
        <td>02/05/2014</td>
        <td>a_value,c_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 4</td>
        <td>604</td>
        <td>02/25/2014</td>
        <td>a_value,bb_value</td>
        <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 5</td>
        <td>550</td>
        <td>02/01/2014</td>
        <td>c_value,e_value</td>
        <td><span class="label lightblue">Tag2</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 1</td>
        <td>901</td>
        <td>02/02/2014</td>
        <td>a_value,e_value</td>
        <td><span class="label lightblue">Tag1</span></td>
    </tr>
    <tr class="gradeA">
        <td>Some Data 11</td>
        <td>911</td>
        <td>02/22/2014</td>
        <td>a_value,e_value</td>
        <td><span class="label lightblue">Tag11</span></td>
    </tr>
    </tbody>
</table>
</body>
</html>

The text was updated successfully, but these errors were encountered:

vedmack · 2016-08-30T18:52:27Z

Create a test page with your favorite js playground tool and post it here...

therealdjryan · 2016-08-31T01:40:00Z

Yup, should have done that to begin with

https://jsfiddle.net/therealdjryan/g7m4d1h4/6/

vedmack · 2016-09-23T21:45:05Z

fixed in 0.9.1.beta.2 , see working sample

javiervg · 2016-10-10T18:52:02Z

Hi Daniel,

Thanks for providing and managing the code of yadcf. It is a very helpful tool. Might be a misunderstanding of what the fliter should do, but the concern with the implementation with the cumulative filter and the multi_select is that the cumulative filter ends up filtering the column in selection. Might be better as the user selects a column, the cumulative filter applies to the next columns as if it were hierarchical.

vedmack · 2016-10-10T19:46:50Z

You are welcome,
Isn't the showcase shows exactly what your were looking for? If you select "Some Data 1" in the first column the last column filter values will be narrowed down to Tag1/2/3/11 while Tag 4/5 will be removed.

javiervg · 2016-10-10T21:24:34Z

Thanks for the prompt response vedmack. Let me try to clarify the scenario, and sorry if I misunderstand the cumulative filter purpose for multi_select.

The big advantage of the multi_select filter select is that you can select multiple values from the column, i.e. Some Data 1, Some Data 5 (to show Some Data 1 OR Some Data 5) at the same time when there is no cumulative filter, which works great in yadcf.

However, when the cumulative filter is applied, it is not possible to do an OR selector for the same field, i.e. if selecting Some Data 1, not possible to select Some Data 5 also. The multi-select filter behaves just like a single selector because the field is being filtered by the first value Some Data 1.

Ideally, to keep the multi-select benefits, it would be great to keep the multi_select the same field field. For example, you are able to select Some Data 1 and Some Data 5, and if you would like to filter by the tags, only the tags from Some Data 1 OR Some Data 5 would be displayed?

vedmack · 2016-10-10T21:34:56Z

I think you want the following feature - #255 , just noticed that its was opened way way ago and its requested by multiple, so I will try to implement it in the near future

javiervg · 2016-10-10T21:50:30Z

Awesome, thanks a lot.

pratikpowar · 2017-01-19T09:25:49Z

Hi,
This https://jsfiddle.net/g7m4d1h4/7/ jsfiddle showing single value selection and not as per chosen example http://yadcf-showcase.appspot.com/DOM_source_chosen.html for that first column

vedmack · 2017-01-19T09:32:55Z

@pratikpowar thats because this bug was fixed long time ago and this issue is closed because of that...

vedmack added the bug label Aug 31, 2016

vedmack added a commit that referenced this issue Sep 23, 2016

Fixed chosen in cumulative mode filtering #344

1291b08

vedmack added a commit that referenced this issue Sep 23, 2016

Fixed chosen in cumulative mode filtering #344

2b41fa8

vedmack closed this as completed Sep 23, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cumulative filtering does not work correctly with chosen #344

Cumulative filtering does not work correctly with chosen #344

therealdjryan commented Aug 30, 2016

vedmack commented Aug 30, 2016

therealdjryan commented Aug 31, 2016

vedmack commented Sep 23, 2016

javiervg commented Oct 10, 2016

vedmack commented Oct 10, 2016

javiervg commented Oct 10, 2016

vedmack commented Oct 10, 2016

javiervg commented Oct 10, 2016

pratikpowar commented Jan 19, 2017

vedmack commented Jan 19, 2017

Cumulative filtering does not work correctly with chosen #344

Cumulative filtering does not work correctly with chosen #344

Comments

therealdjryan commented Aug 30, 2016

vedmack commented Aug 30, 2016

therealdjryan commented Aug 31, 2016

vedmack commented Sep 23, 2016

javiervg commented Oct 10, 2016

vedmack commented Oct 10, 2016

javiervg commented Oct 10, 2016

vedmack commented Oct 10, 2016

javiervg commented Oct 10, 2016

pratikpowar commented Jan 19, 2017

vedmack commented Jan 19, 2017