Skip to content Skip to sidebar Skip to footer

How To Filter Records By Clicking Div Array?

This refers to my previous question. how to filter records based on key click? But now i am trying to communicate between div element array and table so how can i filter records ba

Solution 1:

I have modified your code a bit. May be this example could be helpful to you? Paste into a html file and see it work.

Edit: modified code due to change in request Edit2: modified again to put the filter in functions

<!DOCTYPE html><html><head><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>
            $(document).ready(function(){   

                var filterList = [22,23,24];

                //-----Code to implement click listener---
                $('#showMyDataButton').click(function(){
                    if($(this).hasClass('clickableDivOff')){
                        //--------------------------// Turn on Filter//--------------------------//change button effects
                        $(this).removeClass('clickableDivOff');
                        $(this).addClass('clickableDivOn');
                        $(this).text('Filter is on');

                        //applying filterTurnOnFilter(filterList);
                    } else {
                        //--------------------------// Turn off Filter//--------------------------//change button effects
                        $(this).removeClass('clickableDivOn');
                        $(this).addClass('clickableDivOff');
                        $(this).text('Filter is off');

                        //applying filterTurnOffFilter();
                    }
                });
            });

            functionTurnOnFilter(filterList){
                //hide all rows first (but not table header);
                $('#dataTable tr').hide();
                $('#dataTable tr:nth-child(1)').show();

                //iterate each id in the filter list//within each iteration, check all rows to find a matching id// displays matching row.for(var i=0;i<filterList.length;i++){
                    $('#dataTable td:nth-child(1)').each(function(){
                        if($(this).text().trim()==filterList[i]){
                            $(this).parent().show();
                        } 
                    });
                }
            }

            functionTurnOffFilter(){
                //simple show all the rows
                $('#dataTable tr').show();
            }
        </script><style>.clickableDiv{
                border: 2px solid #ddd;
                width: 200px;
                text-align:center;
                cursor: pointer;
            }

            .clickableDivOn{
                font-weight:bold;
                color: white;
                background-color: #58BE97;
            }

            .clickableDivOff{
                font-weight:bold;
                color: white;
                background-color: #EF9012;
            }

            tabletd, tableth{
                width:33%;
                padding-left:5px;
                text-align:left;
            }
        </style></head><body><h2>Filter Test</h2><divid="showMyDataButton"class="clickableDiv clickableDivOff">Filter is off</div><p></p><tableid="dataTable"border =1cellspacing="1"cellpadding="1"style="width:100%"><tr><th>ID</th><th>Name</th><th>Marks</th></tr><tr><td>22</td><td>Smith</td><td>50</td></tr><tr><td>23</td><td>Jackson</td><td>94</td></tr><tr><td>45</td><td>Doe</td><td>80</td></tr><tr><td>24</td><td>Doe</td><td>80</td></tr><tr><td>25</td><td>Doe</td><td>80</td></tr><tr><td>29</td><td>Doe</td><td>80</td></tr></table></body></html>

Post a Comment for "How To Filter Records By Clicking Div Array?"