Created
November 26, 2019 01:19
-
-
Save Deanomac/c2ade13658bbfd3357b1c7e5f611b2b0 to your computer and use it in GitHub Desktop.
poommwE
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<title>CodePen - A Pen by Augusto</title> | |
<link rel='stylesheet' href='https://codepen.io/assets/libs/fullpage/jquery-ui.css'> | |
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> | |
</head> | |
<!--[if IE ]> | |
<body class="ie"> | |
<![endif]--> | |
<!--[if !IE]>--> | |
<body style="visibility:hidden;"> | |
<!--<![endif]--> | |
<html> | |
<head> | |
<link rel="stylesheet" href="style.css"> | |
<script src="script.js" type="text/javascript"></script> | |
</head> | |
<body> | |
<h1>Table Sorter Final</h1> | |
<input type="search" class="light-table-filter" data-table="search-table" placeholder="Search.."> | |
<br/> | |
<br/> | |
<div id="combito"> | |
<div id="separator"></div> | |
<div class="opt-combito" id="asc"> | |
<img src="images/hmenu-asc.gif" alt="" /> | |
<span>Sort Ascending</span> | |
</div> | |
<div class="opt-combito" id="desc"> | |
<img src="images/hmenu-desc.gif" alt="" /> | |
<span>Sort Descending</span> | |
</div> | |
</div> | |
<table class="filter-table" style="border-spacing: 0px ;" border="1"> | |
<thead> | |
<tr> | |
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th><th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th><th style="padding: 0px;"><div style="width:95%" /> </div></th><th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th><th style="padding: 0px;"><select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /><option selected="true" value="">--All--</option></select></th><th style="padding: 0px;"><select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /><option selected="true" value="">--All--</option></select></th><th style="padding: 0px;"><select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /><option selected="true" value="">--All--</option></select></th><th style="padding: 0px;"> <select style="display:block;width:95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /><option selected="true" value="">--All--</option></select></th><th style="padding: 0px;"> <select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /><option selected="true" value="">--All--</option></select></th> | |
</tr> | |
</thead> | |
</table> | |
<table border="1" id="tablita" class="sortable search-table"> | |
<thead> | |
<tr> | |
<th class="menu" style="">ID<span class="gg"></span></th> | |
<th class="menu" style="">Name<span class="gg"></span></th> | |
<th class="menu" style="">Phone<span class="gg"></span></th> | |
<th class="menu" style="">Email<span class="gg"></span></th> | |
<th class="menu" style="">City<span class="gg"></span></th> | |
<th class="menu" style="">State<span class="gg"></span></th> | |
<th class="menu" style="">Zip Code<span class="gg"></span></th> | |
<th class="menu" style="">Status<span class="gg"></span></th> | |
<th class="menu" style="">Vehicle<span class="gg"></span></th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>1</td> | |
<td>Kaseem Huber</td> | |
<td>(587) 117-5521</td> | |
<td>.@samecore.org</td> | |
<td>Burlington</td> | |
<td>DE</td> | |
<td>81070</td> | |
<td>Aproved</td> | |
<td>Toyota</td> | |
</tr> | |
<tr> | |
<td>2</td> | |
<td>Oleg Michael</td> | |
<td>(539) 184-8550</td> | |
<td>pages@andit.edu</td> | |
<td>Covina</td> | |
<td>SC</td> | |
<td>48758</td> | |
<td>Aproved</td> | |
<td>Toyota</td> | |
</tr> | |
<tr> | |
<td>3</td> | |
<td>Kibo Ochoa</td> | |
<td>(837) 601-9918</td> | |
<td>Usenet.in@increasedopportunity.edu</td> | |
<td>Placentia</td> | |
<td>UT</td> | |
<td>09075</td> | |
<td>Aproved</td> | |
<td>Chevrolet</td> | |
</tr> | |
<tr> | |
<td>4</td> | |
<td>Joseph Lindsey</td> | |
<td>(303) 872-2482</td> | |
<td>the.variety@able.org</td> | |
<td>Murrieta</td> | |
<td>WA</td> | |
<td>17380</td> | |
<td>Aproved</td> | |
<td>Nissan</td> | |
</tr> | |
<tr> | |
<td>5</td> | |
<td>Forrest Schneider</td> | |
<td>(203) 666-7954</td> | |
<td>that@onUsenetin.edu</td> | |
<td>Louisville</td> | |
<td>WA</td> | |
<td>58263</td> | |
<td>Aproved</td> | |
<td>Hyundai</td> | |
</tr> | |
<tr> | |
<td>6</td> | |
<td>Fuller Garrett</td> | |
<td> </td> | |
<td>some@technologythanits.com</td> | |
<td>Winnemucca</td> | |
<td>MD</td> | |
<td>46070</td> | |
<td>Pending</td> | |
<td>Dodge</td> | |
</tr> | |
<tr> | |
<td>7</td> | |
<td>Kirk Mosley</td> | |
<td>(310) 657-8879</td> | |
<td>time.and@NationalCenter.org</td> | |
<td>Laguna Hills</td> | |
<td>LA</td> | |
<td>63484</td> | |
<td>Pending</td> | |
<td>Toyota</td> | |
</tr> | |
<tr> | |
<td>8</td> | |
<td>William Kennedy</td> | |
<td>(575) 138-2347</td> | |
<td>of@saidtohave.com</td> | |
<td>Barrow</td> | |
<td>PA</td> | |
<td>41982</td> | |
<td>Pending</td> | |
<td>Toyota</td> | |
</tr> | |
<tr> | |
<td>9</td> | |
<td>Kieran Delgado</td> | |
<td>(747) 791-4428</td> | |
<td>commonly@use.com</td> | |
<td>Fairbanks</td> | |
<td>AK</td> | |
<td>30806</td> | |
<td>Pending</td> | |
<td>Toyota</td> | |
</tr> | |
<tr> | |
<td>10</td> | |
<td>Eagan Dudley</td> | |
<td>(615) 232-5094</td> | |
<td>also@mixedwithtext.edu</td> | |
<td>Cedar Rapids</td> | |
<td>AZ</td> | |
<td>37938</td> | |
<td>Pending</td> | |
<td>Dodge</td> | |
</tr> | |
<tr> | |
<td>11</td> | |
<td>Driscoll Hooper</td> | |
<td>(730) 166-1185</td> | |
<td> </td> | |
<td>Webster Groves</td> | |
<td>SC</td> | |
<td>09548</td> | |
<td>Pending</td> | |
<td>Hyundai</td> | |
</tr> | |
<tr> | |
<td>12</td> | |
<td>Tad Chambers</td> | |
<td>(720) 167-4770</td> | |
<td>"www".prefix@asks.org</td> | |
<td>Normal</td> | |
<td>ND</td> | |
<td>51846</td> | |
<td>Pending</td> | |
<td>Toyota</td> | |
</tr> | |
<tr> | |
<td>13</td> | |
<td>Russell Harper</td> | |
<td>(222) 149-2499</td> | |
<td>Berners-Lee@newsserver"news".com</td> | |
<td>Columbia</td> | |
<td>VT</td> | |
<td>43163</td> | |
<td>Canceled</td> | |
<td>Toyota</td> | |
</tr> | |
<tr> | |
<td>14</td> | |
<td>Oleg Sears</td> | |
<td>(214) 156-3767</td> | |
<td>such.prefixes.are@human.ca</td> | |
<td>Hammond</td> | |
<td>CA</td> | |
<td>58133</td> | |
<td>Canceled</td> | |
<td>Chevrolet</td> | |
</tr> | |
<tr> | |
<td>15</td> | |
<td>Louis Moss</td> | |
<td>(520) 212-3528</td> | |
<td>Andreessen@rotlinks.com</td> | |
<td>Goose Creek</td> | |
<td>TN</td> | |
<td>78141</td> | |
<td>Canceled</td> | |
<td>Daihatsu</td> | |
</tr> | |
</tbody> | |
</table> | |
</body> | |
</html> | |
<script src='https://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script> | |
<script src="js/index.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Filtering | |
(function(document) { | |
'use strict'; | |
//27th january | |
var ResizeColumnWidths = { | |
init:function(){ | |
this.executeResize(); | |
}, | |
executeResize:function(){ | |
resizeTables(); | |
} | |
} | |
//27th january | |
ResizeColumnWidths.init(); | |
//6th january | |
var DropDownListValues = { | |
init:function(){ | |
//off is used to do an initial unlinking of events to prevent cross reference of past handlers | |
helper_fillvaluesDropDownList(); | |
} | |
}; | |
//6th january | |
//initialization of additional modules | |
DropDownListValues.init(); | |
var LightTableFilter = (function(Arr) { | |
var _input; | |
function _onInputEvent(e) { | |
_input = e.target; | |
var tables = document.getElementsByClassName(_input.getAttribute('data-table')); | |
Arr.forEach.call(tables, function(table) { | |
Arr.forEach.call(table.tBodies, function(tbody) { | |
Arr.forEach.call(tbody.rows, _filter); | |
}); | |
}); | |
} | |
function _filter(row) { | |
var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase(); | |
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row'; //for future decoration with css. Currently is not used by javascript or css | |
} | |
return { | |
init: function() { | |
var inputs = document.getElementsByClassName('light-table-filter'); | |
Arr.forEach.call(inputs, function(input) { | |
input.oninput = _onInputEvent; | |
}); | |
} | |
}; | |
})(Array.prototype); | |
document.addEventListener('readystatechange', function() { | |
if (document.readyState === 'complete') { | |
LightTableFilter.init(); | |
} | |
}); | |
//Yanire | |
//21st December Begin | |
var LightTableFilterByColumn = (function(Arr) { | |
var _input; | |
function _onInputEvent(e) { | |
e.stopPropagation(); | |
_input = e.target; | |
// var tables = document.getElementsByClassName(_input.getAttribute('data-table')); | |
var tables = $('.search-table').get(0); //$(_input).closest('.search-table').get(0); | |
var arrayFilterColumns = $('.filter-table thead tr th'); // var arrayFilterColumns = $('.filter-table thead input.searchByColumn'); | |
var arrayFilterCriteria = new Array(); | |
//generate an array of all the search criteria in the filter criteria textboxes, in order to consider them all in the filtering process | |
$.each(arrayFilterColumns, function(indice, columnCriteria){ | |
//if cell has a column filter textbox or not | |
if($(columnCriteria).find('.searchByColumn').length>0){ | |
//6th January | |
arrayFilterCriteria[indice] = { 'criteriaString' : $(columnCriteria).find('.searchByColumn')[0].value.toLowerCase() , 'isEnabled':true}; //arrayFilterCriteria[indice] = columnCriteria.value.toLowerCase(); | |
} | |
else{ | |
arrayFilterCriteria[indice] = { 'criteriaString' : '', 'isEnabled':false}; //arrayFilterCriteria[indice] = columnCriteria.value.toLowerCase(); | |
} | |
}); | |
$.each(tables.tBodies[0].rows, function(indice, row){ | |
var arrayConditionFilter=new Array(); | |
var jqueryRow=$(row); | |
var jqueryCell = jqueryRow.find('td'); | |
var arrayText = new Array(); | |
//generate an array of all the values in the filter columns, in order to consider them all in the filtering process | |
$.each(jqueryCell, function(indice, columna){ | |
arrayText[indice] = $(columna).text().toLowerCase(); | |
}); | |
for(var i=0;i<arrayFilterCriteria.length;i++){ | |
if(arrayText[i].length==0){ | |
arrayConditionFilter[i] = true; | |
} | |
else{ | |
if(!(arrayFilterCriteria[i].isEnabled)){ | |
arrayConditionFilter[i] = true; | |
} | |
else{ | |
if(arrayFilterCriteria[i].criteriaString.length==0){ | |
arrayConditionFilter[i] = true; | |
} | |
else{ | |
arrayConditionFilter[i] = arrayText[i].indexOf(arrayFilterCriteria[i].criteriaString) === -1 ? false : true; | |
} | |
} | |
} | |
} | |
//check if all conditions required are true to show in the results | |
var conditionFilterShowRow=true; | |
for(i=0;i<arrayFilterCriteria.length;i++){ | |
conditionFilterShowRow = conditionFilterShowRow && arrayConditionFilter[i]; | |
} | |
row.style.display = conditionFilterShowRow ? 'table-row' : 'none' ; | |
} | |
); | |
/* Arr.forEach.call(tables, function(table) { | |
Arr.forEach.call(table.tBodies, function(tbody) { | |
Arr.forEach.call(tbody.rows, _filter, columnIndex); | |
}); | |
}); */ | |
//function _filter(row, columnIndex) {} | |
/* | |
function _filter(indice, row) { | |
event.stopPropagation();//prevents header parent from triggering actions afterwards | |
var jqueryRow=$(row); | |
var jqueryCell = jqueryRow.find('td'); | |
var text = jqueryCell.get(columnIndex).text.toLowerCase(), val = _input.value.toLowerCase(); | |
// var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase(); | |
// row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row'; | |
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row'; | |
*/ | |
//7th January | |
helper_fillvaluesDropDownList(); | |
//27th january | |
resizeTables(); | |
} | |
return { | |
init: function() { | |
//7th January | |
var inputs = document.getElementsByClassName('searchByColumn'); | |
Arr.forEach.call(inputs, function(input) { | |
//Must link correct event with DOM object (textbox, select) in order for the filtering to be triggered | |
//input textbox column filter | |
if($(input).is('input[type="text"]')){ | |
input.oninput = _onInputEvent; | |
} | |
//dropdownlist column filter | |
else if($(input).is('select')){ | |
input.onchange = _onInputEvent; | |
} | |
else{ | |
} | |
}); | |
//test | |
} | |
}; | |
})(Array.prototype); | |
document.addEventListener('readystatechange', function() { | |
if (document.readyState === 'complete') { | |
LightTableFilterByColumn.init(); | |
} | |
}); | |
//21st December End | |
//28 January | |
//$('body').show(); | |
// $('body').attr('style','visibility:hidden') ; | |
$('body').attr('style','visibility:visible') ; | |
/* | |
$('#parent').css('visibility', 'hidden').show(); | |
var w = $('#parent div').width(); | |
$('#parent').css('visibility', 'visible').hide(); | |
*/ | |
})(document); | |
$('.gg').on('click', function(e){ | |
//27th january | |
resizeTables(); | |
e.stopPropagation(); | |
$('#combito').css( | |
{ | |
'left': $(this).offset().left, | |
'top': $(this).offset().top + 23 | |
} | |
); | |
$('#combito').toggleClass('show'); | |
if($('#combito').hasClass('show')) | |
$(this).addClass('gg-activo'); | |
else | |
$('.gg').removeClass('gg-activo'); | |
}); | |
$(document).on('click', function(){ | |
console.log('click en documento') | |
//27th january | |
//resizeTables(); | |
$('#combito').removeClass('show'); | |
$('.gg').removeClass('gg-activo'); | |
}); | |
//PERU - Table Sorting | |
var stIsIE = /*@cc_on!@*/false; | |
sorttable = { | |
init: function() { | |
// quit if this function has already been called | |
if (arguments.callee.done) return; | |
// flag this function so we don't do the same thing twice | |
arguments.callee.done = true; | |
// kill the timer | |
if (_timer) clearInterval(_timer); | |
if (!document.createElement || !document.getElementsByTagName) return; | |
sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/; | |
forEach(document.getElementsByTagName('table'), function(table) { | |
if (table.className.search(/\bsortable\b/) != -1) { | |
sorttable.makeSortable(table); | |
} | |
}); | |
}, | |
makeSortable: function(table) { | |
if (table.getElementsByTagName('thead').length == 0) { | |
// table doesn't have a tHead. Since it should have, create one and | |
// put the first table row in it. | |
the = document.createElement('thead'); | |
the.appendChild(table.rows[0]); | |
table.insertBefore(the,table.firstChild); | |
} | |
// Safari doesn't support table.tHead, sigh | |
if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0]; | |
if (table.tHead.rows.length != 1) return; // can't cope with two header rows | |
// Sorttable v1 put rows with a class of "sortbottom" at the bottom (as | |
// "total" rows, for example). This is B&R, since what you're supposed | |
// to do is put them in a tfoot. So, if there are sortbottom rows, | |
// for backwards compatibility, move them to tfoot (creating it if needed). | |
sortbottomrows = []; | |
for (var i=0; i<table.rows.length; i++) { | |
if (table.rows[i].className.search(/\bsortbottom\b/) != -1) { | |
sortbottomrows[sortbottomrows.length] = table.rows[i]; | |
} | |
} | |
if (sortbottomrows) { | |
if (table.tFoot == null) { | |
// table doesn't have a tfoot. Create one. | |
tfo = document.createElement('tfoot'); | |
table.appendChild(tfo); | |
} | |
for (var i=0; i<sortbottomrows.length; i++) { | |
tfo.appendChild(sortbottomrows[i]); | |
} | |
delete sortbottomrows; | |
} | |
// work through each column and calculate its type | |
headrow = table.tHead.rows[0].cells; | |
for (var i=0; i<headrow.length; i++) { | |
// manually override the type with a sorttable_type attribute | |
if (!headrow[i].className.match(/\bsorttable_nosort\b/)) { // skip this col | |
mtch = headrow[i].className.match(/\bsorttable_([a-z0-9]+)\b/); | |
if (mtch) { override = mtch[1]; } | |
if (mtch && typeof sorttable["sort_"+override] == 'function') { | |
headrow[i].sorttable_sortfunction = sorttable["sort_"+override]; | |
} else { | |
headrow[i].sorttable_sortfunction = sorttable.guessType(table,i); | |
} | |
// make it clickable to sort | |
headrow[i].sorttable_columnindex = i; | |
headrow[i].sorttable_tbody = table.tBodies[0]; | |
dean_addEvent(headrow[i],"click", sorttable.innerSortFunction = function(e) { | |
console.log('test-click header sort'); | |
if (this.className.search(/\bsorttable_sorted\b/) != -1) { | |
// if we're already sorted by this column, just | |
// reverse the table, which is quicker | |
sorttable.reverse(this.sorttable_tbody); | |
this.className = this.className.replace('sorttable_sorted', | |
'sorttable_sorted_reverse'); | |
this.removeChild(document.getElementById('sorttable_sortfwdind')); | |
sortrevind = document.createElement('span'); | |
sortrevind.id = "sorttable_sortrevind"; | |
//sortrevind.innerHTML = stIsIE ? ' <font face="webdings">5</font>' : ' ▴'; | |
this.appendChild(sortrevind); | |
return; | |
} | |
if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) { | |
// if we're already sorted by this column in reverse, just | |
// re-reverse the table, which is quicker | |
sorttable.reverse(this.sorttable_tbody); | |
this.className = this.className.replace('sorttable_sorted_reverse', | |
'sorttable_sorted'); | |
this.removeChild(document.getElementById('sorttable_sortrevind')); | |
sortfwdind = document.createElement('span'); | |
sortfwdind.id = "sorttable_sortfwdind"; | |
//sortfwdind.innerHTML = stIsIE ? ' <font face="webdings">6</font>' : ' ▾'; | |
this.appendChild(sortfwdind); | |
return; | |
} | |
// remove sorttable_sorted classes | |
theadrow = this.parentNode; | |
forEach(theadrow.childNodes, function(cell) { | |
if (cell.nodeType == 1) { // an element | |
cell.className = cell.className.replace('sorttable_sorted_reverse',''); | |
cell.className = cell.className.replace('sorttable_sorted',''); | |
} | |
}); | |
sortfwdind = document.getElementById('sorttable_sortfwdind'); | |
if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); } | |
sortrevind = document.getElementById('sorttable_sortrevind'); | |
if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); } | |
this.className += ' sorttable_sorted'; | |
sortfwdind = document.createElement('span'); | |
sortfwdind.id = "sorttable_sortfwdind"; | |
//sortfwdind.innerHTML = stIsIE ? ' <font face="webdings">6</font>' : ' ▾'; | |
this.appendChild(sortfwdind); | |
// build an array to sort. This is a Schwartzian transform thing, | |
// i.e., we "decorate" each row with the actual sort key, | |
// sort based on the sort keys, and then put the rows back in order | |
// which is a lot faster because you only do getInnerText once per row | |
row_array = []; | |
col = this.sorttable_columnindex; | |
rows = this.sorttable_tbody.rows; | |
for (var j=0; j<rows.length; j++) { | |
row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), rows[j]]; | |
} | |
/* If you want a stable sort, uncomment the following line */ | |
sorttable.shaker_sort(row_array, this.sorttable_sortfunction); | |
/* and comment out this one */ | |
//row_array.sort(this.sorttable_sortfunction); | |
tb = this.sorttable_tbody; | |
for (var j=0; j<row_array.length; j++) { | |
tb.appendChild(row_array[j][1]); | |
} | |
delete row_array; | |
e.stopPropagation();//test | |
return false; | |
}); | |
} | |
} | |
}, | |
guessType: function(table, column) { | |
// guess the type of a column based on its first non-blank row | |
sortfn = sorttable.sort_alpha; | |
for (var i=0; i<table.tBodies[0].rows.length; i++) { | |
text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]); | |
if (text != '') { | |
if (text.match(/^-?[£$¤]?[\d,.]+%?$/)) { | |
return sorttable.sort_numeric; | |
} | |
// check for a date: dd/mm/yyyy or dd/mm/yy | |
// can have / or . or - as separator | |
// can be mm/dd as well | |
possdate = text.match(sorttable.DATE_RE) | |
if (possdate) { | |
// looks like a date | |
first = parseInt(possdate[1]); | |
second = parseInt(possdate[2]); | |
if (first > 12) { | |
// definitely dd/mm | |
return sorttable.sort_ddmm; | |
} else if (second > 12) { | |
return sorttable.sort_mmdd; | |
} else { | |
// looks like a date, but we can't tell which, so assume | |
// that it's dd/mm (English imperialism!) and keep looking | |
sortfn = sorttable.sort_ddmm; | |
} | |
} | |
} | |
} | |
return sortfn; | |
}, | |
getInnerText: function(node) { | |
// gets the text we want to use for sorting for a cell. | |
// strips leading and trailing whitespace. | |
// this is *not* a generic getInnerText function; it's special to sorttable. | |
// for example, you can override the cell text with a customkey attribute. | |
// it also gets .value for <input> fields. | |
if (!node) return ""; | |
hasInputs = (typeof node.getElementsByTagName == 'function') && | |
node.getElementsByTagName('input').length; | |
if (node.getAttribute("sorttable_customkey") != null) { | |
return node.getAttribute("sorttable_customkey"); | |
} | |
else if (typeof node.textContent != 'undefined' && !hasInputs) { | |
return node.textContent.replace(/^\s+|\s+$/g, ''); | |
} | |
else if (typeof node.innerText != 'undefined' && !hasInputs) { | |
return node.innerText.replace(/^\s+|\s+$/g, ''); | |
} | |
else if (typeof node.text != 'undefined' && !hasInputs) { | |
return node.text.replace(/^\s+|\s+$/g, ''); | |
} | |
else { | |
switch (node.nodeType) { | |
case 3: | |
if (node.nodeName.toLowerCase() == 'input') { | |
return node.value.replace(/^\s+|\s+$/g, ''); | |
} | |
case 4: | |
return node.nodeValue.replace(/^\s+|\s+$/g, ''); | |
break; | |
case 1: | |
case 11: | |
var innerText = ''; | |
for (var i = 0; i < node.childNodes.length; i++) { | |
innerText += sorttable.getInnerText(node.childNodes[i]); | |
} | |
return innerText.replace(/^\s+|\s+$/g, ''); | |
break; | |
default: | |
return ''; | |
} | |
} | |
}, | |
reverse: function(tbody) { | |
// reverse the rows in a tbody | |
newrows = []; | |
for (var i=0; i<tbody.rows.length; i++) { | |
newrows[newrows.length] = tbody.rows[i]; | |
} | |
for (var i=newrows.length-1; i>=0; i--) { | |
tbody.appendChild(newrows[i]); | |
} | |
delete newrows; | |
}, | |
/* sort functions | |
each sort function takes two parameters, a and b | |
you are comparing a[0] and b[0] */ | |
sort_numeric: function(a,b) { | |
aa = parseFloat(a[0].replace(/[^0-9.-]/g,'')); | |
if (isNaN(aa)) aa = 0; | |
bb = parseFloat(b[0].replace(/[^0-9.-]/g,'')); | |
if (isNaN(bb)) bb = 0; | |
return aa-bb; | |
}, | |
sort_alpha: function(a,b) { | |
if (a[0]==b[0]) return 0; | |
if (a[0]<b[0]) return -1; | |
return 1; | |
}, | |
sort_ddmm: function(a,b) { | |
mtch = a[0].match(sorttable.DATE_RE); | |
y = mtch[3]; m = mtch[2]; d = mtch[1]; | |
if (m.length == 1) m = '0'+m; | |
if (d.length == 1) d = '0'+d; | |
dt1 = y+m+d; | |
mtch = b[0].match(sorttable.DATE_RE); | |
y = mtch[3]; m = mtch[2]; d = mtch[1]; | |
if (m.length == 1) m = '0'+m; | |
if (d.length == 1) d = '0'+d; | |
dt2 = y+m+d; | |
if (dt1==dt2) return 0; | |
if (dt1<dt2) return -1; | |
return 1; | |
}, | |
sort_mmdd: function(a,b) { | |
mtch = a[0].match(sorttable.DATE_RE); | |
y = mtch[3]; d = mtch[2]; m = mtch[1]; | |
if (m.length == 1) m = '0'+m; | |
if (d.length == 1) d = '0'+d; | |
dt1 = y+m+d; | |
mtch = b[0].match(sorttable.DATE_RE); | |
y = mtch[3]; d = mtch[2]; m = mtch[1]; | |
if (m.length == 1) m = '0'+m; | |
if (d.length == 1) d = '0'+d; | |
dt2 = y+m+d; | |
if (dt1==dt2) return 0; | |
if (dt1<dt2) return -1; | |
return 1; | |
}, | |
shaker_sort: function(list, comp_func) { | |
// A stable sort function to allow multi-level sorting of data | |
// see: http://en.wikipedia.org/wiki/Cocktail_sort | |
// thanks to Joseph Nahmias | |
var b = 0; | |
var t = list.length - 1; | |
var swap = true; | |
while(swap) { | |
swap = false; | |
for(var i = b; i < t; ++i) { | |
if ( comp_func(list[i], list[i+1]) > 0 ) { | |
var q = list[i]; list[i] = list[i+1]; list[i+1] = q; | |
swap = true; | |
} | |
} // for | |
t--; | |
if (!swap) break; | |
for(var i = t; i > b; --i) { | |
if ( comp_func(list[i], list[i-1]) < 0 ) { | |
var q = list[i]; list[i] = list[i-1]; list[i-1] = q; | |
swap = true; | |
} | |
} // for | |
b++; | |
} // while(swap) | |
} | |
} | |
/* ****************************************************************** | |
Supporting functions: bundled here to avoid depending on a library | |
****************************************************************** */ | |
// Dean Edwards/Matthias Miller/John Resig | |
/* for Mozilla/Opera9 */ | |
if (document.addEventListener) { | |
document.addEventListener("DOMContentLoaded", sorttable.init, false); | |
} | |
/* for Internet Explorer */ | |
/*@cc_on @*/ | |
/*@if (@_win32) | |
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>"); | |
var script = document.getElementById("__ie_onload"); | |
script.onreadystatechange = function() { | |
if (this.readyState == "complete") { | |
sorttable.init(); // call the onload handler | |
} | |
}; | |
/*@end @*/ | |
/* for Safari */ | |
if (/WebKit/i.test(navigator.userAgent)) { // sniff | |
var _timer = setInterval(function() { | |
if (/loaded|complete/.test(document.readyState)) { | |
sorttable.init(); // call the onload handler | |
} | |
}, 10); | |
} | |
/* for other browsers */ | |
window.onload = sorttable.init; | |
// written by Dean Edwards, 2005 | |
// with input from Tino Zijdel, Matthias Miller, Diego Perini | |
// http://dean.edwards.name/weblog/2005/10/add-event/ | |
function dean_addEvent(element, type, handler) { | |
if (element.addEventListener) { | |
element.addEventListener(type, handler, false); | |
} else { | |
// assign each event handler a unique ID | |
if (!handler.$$guid) handler.$$guid = dean_addEvent.guid++; | |
// create a hash table of event types for the element | |
if (!element.events) element.events = {}; | |
// create a hash table of event handlers for each element/event pair | |
var handlers = element.events[type]; | |
if (!handlers) { | |
handlers = element.events[type] = {}; | |
// store the existing event handler (if there is one) | |
if (element["on" + type]) { | |
handlers[0] = element["on" + type]; | |
} | |
} | |
// store the event handler in the hash table | |
handlers[handler.$$guid] = handler; | |
// assign a global event handler to do all the work | |
element["on" + type] = handleEvent; | |
} | |
}; | |
// a counter used to create unique IDs | |
dean_addEvent.guid = 1; | |
function removeEvent(element, type, handler) { | |
if (element.removeEventListener) { | |
element.removeEventListener(type, handler, false); | |
} else { | |
// delete the event handler from the hash table | |
if (element.events && element.events[type]) { | |
delete element.events[type][handler.$$guid]; | |
} | |
} | |
}; | |
function handleEvent(event) { | |
var returnValue = true; | |
// grab the event object (IE uses a global event object) | |
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event); | |
// get a reference to the hash table of event handlers | |
var handlers = this.events[event.type]; | |
// execute each event handler | |
for (var i in handlers) { | |
this.$$handleEvent = handlers[i]; | |
if (this.$$handleEvent(event) === false) { | |
returnValue = false; | |
} | |
} | |
return returnValue; | |
}; | |
function fixEvent(event) { | |
// add W3C standard event methods | |
event.preventDefault = fixEvent.preventDefault; | |
event.stopPropagation = fixEvent.stopPropagation; | |
return event; | |
}; | |
fixEvent.preventDefault = function() { | |
this.returnValue = false; | |
}; | |
fixEvent.stopPropagation = function() { | |
this.cancelBubble = true; | |
} | |
// Dean's forEach: http://dean.edwards.name/base/forEach.js | |
/* | |
forEach, version 1.0 | |
Copyright 2006, Dean Edwards | |
License: http://www.opensource.org/licenses/mit-license.php | |
*/ | |
// array-like enumeration | |
if (!Array.forEach) { // mozilla already supports this | |
Array.forEach = function(array, block, context) { | |
for (var i = 0; i < array.length; i++) { | |
block.call(context, array[i], i, array); | |
} | |
}; | |
} | |
// generic enumeration | |
Function.prototype.forEach = function(object, block, context) { | |
for (var key in object) { | |
if (typeof this.prototype[key] == "undefined") { | |
block.call(context, object[key], key, object); | |
} | |
} | |
}; | |
// character enumeration | |
String.forEach = function(string, block, context) { | |
Array.forEach(string.split(""), function(chr, index) { | |
block.call(context, chr, index, string); | |
}); | |
}; | |
// globally resolve forEach enumeration | |
var forEach = function(object, block, context) { | |
if (object) { | |
var resolve = Object; // default | |
if (object instanceof Function) { | |
// functions have a "length" property | |
resolve = Function; | |
} else if (object.forEach instanceof Function) { | |
// the object implements a custom forEach method so use that | |
object.forEach(block, context); | |
return; | |
} else if (typeof object == "string") { | |
// the object is a string | |
resolve = String; | |
} else if (typeof object.length == "number") { | |
// the object is array-like | |
resolve = Array; | |
} | |
resolve.forEach(object, block, context); | |
} | |
}; | |
$('.opt-combito').on('click', function(){ | |
console.log('combito'); | |
if ( $(this).attr('id') == 'asc' ){ | |
console.log('asc'); | |
console.log($('.gg-activo').parent()); | |
console.log('clase ^') | |
//$('.gg-activo').parent().toggleClass('sorttable_sorted_reverse'); | |
if(!($('.gg-activo').parent().hasClass('sorttable_sorted')) | |
&&!($('.gg-activo').parent().hasClass('sorttable_sorted_reverse')) ){ | |
//when page initially loads | |
$('.gg-activo').parent()[0].click(); | |
} | |
else if($('.gg-activo').parent().hasClass('sorttable_sorted')){ | |
//if page has been sorted asc then keep elements the same | |
} | |
else if($('.gg-activo').parent().hasClass('sorttable_sorted_reverse')){ | |
//if page has been sorted desc then invert order | |
$('.gg-activo').parent()[0].click(); | |
} | |
/* 20th december 2014 commented | |
if ( $('.gg-activo').parent().hasClass('sorttable_sorted_reverse')){ | |
sorttable.reverse($('#tablita tbody')[0]); | |
$('.gg-activo').parent()[0].className = $('.gg-activo').parent()[0].className.replace('sorttable_sorted_reverse', | |
'sorttable_sorted'); | |
} | |
*/ | |
} | |
else if ( $(this).attr('id') == 'desc' ){ | |
console.log('desc'); | |
if(!($('.gg-activo').parent().hasClass('sorttable_sorted')) | |
&&!($('.gg-activo').parent().hasClass('sorttable_sorted_reverse')) ){//if(!($('.gg-activo').parent().hasClass('sorttable_sorted_reverse')) ){ | |
var tmpHeaderCeldaSlctd= $('.gg-activo'); | |
$('.gg-activo').parent()[0].click(); | |
//al primer click elimina la clase gg-activo por lo que la volvemos a colocar | |
tmpHeaderCeldaSlctd.addClass('gg-activo'); | |
if($('.gg-activo').parent().length>0){ | |
$('.gg-activo').parent()[0].click(); | |
} | |
//show reverse order | |
} | |
if(!($('.gg-activo').parent().hasClass('sorttable_sorted')) | |
&&!($('.gg-activo').parent().hasClass('sorttable_sorted_reverse')) ){ | |
//when page initially loads | |
var tmpHeaderCeldaSlctd= $('.gg-activo'); | |
$('.gg-activo').parent()[0].click(); | |
//al primer click elimina la clase gg-activo por lo que la volvemos a colocar | |
tmpHeaderCeldaSlctd.addClass('gg-activo'); | |
$('.gg-activo').parent()[0].click(); | |
} | |
else if($('.gg-activo').parent().hasClass('sorttable_sorted')){ | |
//if page has been sorted desc then invert order | |
var tmpHeaderCeldaSlctd= $('.gg-activo'); | |
$('.gg-activo').parent()[0].click(); | |
//only one click is needed | |
} | |
else if($('.gg-activo').parent().hasClass('sorttable_sorted_reverse')){ | |
//if page has been sorted asc then keep elements the same | |
} | |
/*20th december 2014 commented | |
if ( $('.gg-activo').parent().hasClass('sorttable_sorted') ){ | |
sorttable.reverse($('#tablita tbody')[0]); | |
$('.gg-activo').parent()[0].className = $('.gg-activo').parent()[0].className.replace('sorttable_sorted', | |
'sorttable_sorted_reverse'); | |
} | |
*/ | |
} | |
}); | |
//6th January | |
function helper_fillvaluesDropDownList(){ | |
var arrayFilterColumns = $('.filter-table thead tr th'); | |
var valuesDropDownList={}; | |
Array.prototype.contains = function ( needle ) { | |
for (i in this) { | |
if (this[i] == needle) return true; | |
} | |
return false; | |
}; | |
$.each(arrayFilterColumns, function(index, column){ | |
//check if column type is select list | |
if( $(column).find('.searchByColumn').is('select') ){ | |
//iterate all cells within column and build data for drop down list | |
var cellArray=$('.search-table tbody tr:not([style*="none"]) td:nth-child('+(index+1)+')'); // the css selector nth child starts at index 1 and not 0 var cellArray=$('.search-table tbody tr[style*="table-row"] td:nth-child('+indice+')'); | |
valuesDropDownList[index]=Array(); | |
for( var j=0;j<cellArray.length;j++ ){ | |
if(!(valuesDropDownList[index].contains($(cellArray[j]).text()))){ | |
valuesDropDownList[index].push($(cellArray[j]).text()); | |
} | |
} | |
} | |
}); | |
//values for the dropdownlist has been stored in variable valuesDropDownList[index], by the column index | |
//update htlm dropdownlists with values | |
for(var ddlistIndex in valuesDropDownList) { | |
//xxxx example document.write( index + " : " + items[index] + "<br />"); | |
var jquerySelectList = $($('.filter-table thead tr th').get(ddlistIndex)).find("select"); | |
var selectedOptValCurrent= jquerySelectList.val(); | |
var selectedOptTxtCurrent= jquerySelectList.find(":selected").text(); | |
jquerySelectList.empty(); | |
//add default option | |
if(selectedOptValCurrent==""&&selectedOptTxtCurrent=="--All--"){ | |
jquerySelectList.html('<option selected="true" value="">--All--</option>'); | |
} | |
else{ | |
jquerySelectList.html('<option value="">--All--</option>'); | |
} | |
$.each(valuesDropDownList[ddlistIndex], function(indice, valor) { | |
if(selectedOptValCurrent==valor&&selectedOptTxtCurrent==valor){ | |
jquerySelectList.append( | |
$('<option selected="true"></option>').val(valor).html(valor) | |
); | |
} | |
else{ | |
jquerySelectList.append( | |
$('<option></option>').val(valor).html(valor) | |
); | |
} | |
}); | |
} | |
} | |
//27th January | |
function resizeTables() | |
{ | |
console.log("executeResize:"); | |
var tableArrOrigin =$(".search-table")[0];//var tableArr = document.getElementsByTagName('table'); | |
var tableArrDestiny=$(".filter-table")[0]; | |
var cellWidths = new Array(); | |
//get width only from origin table // get widest | |
for(j = 0; j < tableArrOrigin.rows[0].cells.length; j++) | |
{ | |
var cell = tableArrOrigin.rows[0].cells[j]; | |
if ( $('body.ie').length>0 ) {//IE browser | |
cellWidths[j] = $(cell).width()+2;//2=padding, apply fix for IE due to box model managed differently | |
console.log('IE ejecutado') | |
} | |
else{ | |
cellWidths[j] = $(cell).width();//cellWidths[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left'); | |
console.log('No IE ejecutado') | |
} | |
} | |
// set all columns of destiny table equal to width of columns of origin table | |
for(j = 0; j < tableArrOrigin.rows[0].cells.length; j++) | |
{ | |
//tableArrDestiny.rows[0].cells[j].style.width = cellWidths[j]+'px !important;'; | |
$(tableArrDestiny.rows[0].cells[j]).attr('style', 'width:' + cellWidths[j]+'px !important'); | |
} | |
} | |
//console.log(sorttable.reverse); | |
/* 21st December 2014 commented | |
setTimeout(function(){ | |
sorttable.reverse($('#tablita tbody')[0]); | |
}, 2000); | |
*/ | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
table.sortable thead { | |
background-color:#eee; | |
color:#666666; | |
font-weight: bold; | |
cursor: default; | |
} | |
table.menu | |
tr th span.gg { | |
border: 0px solid blue; | |
margin-left: 5px; | |
cursor: pointer; | |
} | |
table, tr th, .gg { | |
position: relative; | |
} | |
#combito{ | |
z-index: 99; | |
width: 200px; | |
background-color: #f0f0f0; | |
cursor: pointer; | |
border: 1px solid #99bbe8; | |
padding: 3px; | |
vertical-align: middle; | |
position: absolute; | |
display: none; | |
font-family: helvetica, tahoma, verdana, sans-serif; | |
font-size: 11px; | |
line-height: 16px; | |
} | |
#combito .opt-combito, #combito .opt-combito *{ | |
padding: 0 2px; | |
margin: 1px; | |
box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
} | |
#combito .opt-combito img{ | |
margin: 4px 11px 0 2px; | |
} | |
#combito .opt-combito span{ | |
top: -4px; | |
position: relative; | |
} | |
#combito .opt-combito:hover{ | |
background-color: #d9e8fb; | |
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#e7f0fc),color-stop(100%,#c7ddf9)); | |
background-image: -moz-linear-gradient(top,#e7f0fc,#c7ddf9); | |
background-image: linear-gradient(top,#e7f0fc,#c7ddf9); | |
box-shadow: 0 0 1px 1px #a9cbf5; | |
} | |
.show{ | |
display: block !important; | |
} | |
#separator{ | |
position: absolute; | |
top: 0; | |
left: 30px; | |
z-index: 0; | |
border-left: solid 1px #e0e0e0; | |
background-color: white; | |
width: 1px; | |
height: 100%; | |
overflow: hidden; | |
} | |
//27th january | |
.filter-table { | |
border-spacing: 0px !important; | |
width:100% !important; | |
border: solid transparent 1px !important; | |
border-collapse: separate !important; | |
} | |
.search-table{ | |
border-collapse: separate !important; | |
border-spacing: 0px !important; | |
} | |
body | |
{ | |
width:expression(document.documentElement.clientWidth <= 1258? "1258px": "auto" ) !important; | |
} | |
.filter-table th,.filter-table td, | |
.filter-table tr | |
{white-space: nowrap; | |
} | |
.search-table th, .search-table td, | |
.search-table tr | |
{white-space: nowrap; | |
} | |
body .filter-table th,body .filter-table td{ | |
box-sizing: content-box !important; | |
-webkit-box-sizing: content-box !important; /* Safari/Chrome, other WebKit */ | |
-moz-box-sizing: content-box !important ; /* Firefox, other Gecko */ | |
} | |
/*ONLY FOR IE*/ | |
body.ie .filter-table th,body.ie .filter-table td{ | |
box-sizing: border-box !important; | |
} | |
.filter-table th,.filter-table td{ | |
display: inline-block; | |
padding:1px !important; | |
border: 1px solid gray !important; | |
} | |
.search-table th, .search-table td{ | |
box-sizing: content-box !important; | |
} | |
body.ie .filter-table th input,body.ie .filter-table th select,body.ie .filter-table th div{ | |
width: 95% !important; /** older browsers - IE **/ | |
} | |
body .filter-table th input,body .filter-table th select,body .filter-table th div{ | |
width: -webkit-calc(100% - 4px) !important; /** Safari 6, Chrome 19-25 **/ | |
width: -moz-calc(100% - 4px) !important; /** FF 4-15 **/ | |
width: calc(100% - 4px) !important;; | |
} | |
/* | |
.filter-table th input, .filter-table th select, .filter-table th div{ | |
/*width:calc(100% - 4px);*/ | |
/*width: 95%; *//** older browsers **/ | |
/* | |
width: -webkit-calc(100% - 4px) !important; /** Safari 6, Chrome 19-25 **/ | |
/* | |
width: -moz-calc(100% - 4px !important; /** FF 4-15 **/ | |
*/ | |
*/ | |
/*width: calc(100% "-" 4px);*/ /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/ | |
} | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment