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?"