8,119
edits
Changes
From Fellrnr.com, Running tips
no edit summary
|}
*/
// Run this function that calls the filterTable() function.
$(function() {
filterTable();
function filterTable(){
// Select any table with the class of filterable and run the following function on each of them
$("table.filterable").each(function(){
// Initilize a counter i and an empty variable rows
var i=0;
var colsrows; // $(this) is the current table. Find the first child element of each table row, and the data of that child
$(this).find("tr:first-child th, tr:first-child td").each(function(){
// If the selected child has the unfilterable class do nothing
if (!$(this).hasClass("unfilterable")){
$(this).closest("table").find("tr td:nth-child("+(i+1)+")").each(function(){
});
l=0;
// Iterate over the rows array to find the longest element, set that length to l for (j=0; j<colsrows.length; j++){ t=charLength(colsrows[j]);
if (l<t) l=t;
}
// Edit the HTML of the header to add a show/hide for the filter menu
$(this).css("position","relative");
$(this).html('<a href="javascript:void(0)" class="showFilterMenu">'+$(this).html()+'▼</a>');
// Add a HTML div for the menu to the DOM
$(this).append($('<div class="filterMenu" style="position:absolute;top:'+$(this).height()+'px;left:0;width:'+(22+l*7)+'px;text-align:left;padding:5px;border:1px #000 solid;background:#ddd;z-index:1;display:none"></div>'));
// Add a button to clear all the checkboxes $(this).find(".filterMenu").append('<div><input type="button" value="Clear" col="'+(i+1)+'" class="filterClear"></div>') // Iterate over the rows array to add each item to the menu for (j=0; j<colsrows.length; j++){ $(this).find(".filterMenu").append('<div><input type="checkbox" value="'+colsrows[j]+'" col="'+(i+1)+'" class="filterOption" checked>'+colsrows[j]+'</div>')
}
}
// Iterate so the function is called on the next column
i++;
});
// Add an attribute to each row called condition that is set to 0
$(this).find("tr:nth-child(n+1)").attr("condition", 0);
});
// When an item with the class showFilterMenu is clicked run the following funciton
$(".showFilterMenu").click(function(){
// Check if the filter menu is currently visible, hide if it is visible, show if it is not, while hiding any other open filter menus
if ($(this).parent().find(".filterMenu:visible").length){
$(".filterMenu").slideUp(150);
}
});
// If a mouse click is released anywhere else on the edocument hide the filter menu
$(document).mouseup(function(e){
var container = $(".filterMenu");
}
});
// When a filter option is clicked in the menu run a function
$(".filterOption").click(function(){
// Set the column that the filter goes to
col=$(this).attr("col");
// Get the value of the checkbox that was changed
val=$(this).val();
// If the checkbox is checked we use positive 1, otherwise use negative 1 (0=show, -1=clear)
if ($(this).is(":checked")) chg=1; else chg=-1;
// Find the children of the table (Aka rows)
$(this).closest("table").find("tr:nth-child(n+1)").each(function(){
// Check if the data in the column related to the menu is the same as the box that was changed
if ($(this).find("td:nth-child("+col+")").text()==val){
// Find the condition of the row and add chg to that value
var cond=$(this).attr("condition");
cond=Number(cond)+chg;
// Set the condition to the new value
$(this).attr("condition", cond);
// If the condition is 0 then show the row, else hide the row
if (cond==0) $(this).show();
else $(this).hide();
}
});
});
// When the clear button is clicked clear all checkboxes and hide all rows
$(".filterClear").click(function(){
// Find all the rows of the table other than the header and hide them
$(this).closest("table").find("tr:not(:first)").each(function(){
// Find the condition of the row
$(this).attr("condition", -1); //override previous values (checked or not)
$(this).hide();
});
// Get all the checkboxes in the current menu and clear the check
$(this).closest(".filterMenu").find(".filterOption").each(function(){
$(this).removeAttr("checked");
});
});
}
// Takes an array and returns a new array with only unique values
function arrayUnique(a) {
return a.reduce(function(p, c) {
}, []);
};
// Gets the number of chars in a string and returns that number.
function charLength(s){
return s.length+(encodeURI(s).split(/%..|./).length-1-s.length)/2;
}
