Javascript-proffs till undsättning! :)
Skulle behöva hjälp med nedanstående kod från någon som är grym på javascript.
Det är en funktion som alfabetiskt sorterar en tabell.
Den fungerar som den ska, men jag önskar den kunde sortera sig utefter en viss kolumn redan från start. Just nu laddas datan huller om buller vid start, och sorteras först då man tryckt på en av headerna.
Med mina ringa js-kunskaper har jag helt enkelt försökt anropa "sortTable()"-funktionen i body'ns "onload"-event:
<body onload="sortTable()">
Men tydligen uppstår ett fel som dessutom gör att sidan slutar svara, och jag gissar det beror på att "initTableWidget()" som också anropas vid start och initierar tabellen helt enkelt inte slutfört sitt jobb ännu och de diverse variablerna och objekt som anropas innuti "sortTable()" ännu inte är tillgängliga.
Jag har försökt generalisera koden för överskådlighetens skull.
<html>
<head>
<style type="text/css">
.tableWidget_headerCell,.tableWigdet_headerCellOver,.tableWigdet_headerCellDown{
-webkit-margin-top-collapse: separate;
-webkit-margin-bottom-collapse: separate;
-webkit-border-image: url(header_yellow_44.png) 0 1 0 1 stretch stretch;
}
.tableWidget td{ }
</style>
<script type="text/javascript">
var tableWidget_tableCounter = 0;
var tableWidget_arraySort = new Array();
var tableWidget_okToSort = true;
var activeColumn = new Array();
var arrowImagePath = ""; // Path to arrow images
function addEndCol(obj)
{
if(document.all)return;
var rows = obj.getElementsByTagName('TR');
for(var no=0;no<rows.length;no++){
//var cell = rows[no].insertCell(-1);
//cell.innerHTML = ' ';
//cell.style.width = '13px';
//cell.width = '13';
}
}
function highlightTableHeader()
{
this.className='tableWigdet_headerCellOver';
if(document.all){ // I.E fix for "jumping" headings
var divObj = this.parentNode.parentNode.parentNode.parentNode;
this.parentNode.style.top = divObj.scrollTop + 'px';
}
}
function deHighlightTableHeader()
{
this.className='tableWidget_headerCell';
}
function mousedownTableHeader()
{
this.className='tableWigdet_headerCellDown';
if(document.all){ // I.E fix for "jumping" headings
var divObj = this.parentNode.parentNode.parentNode.parentNode;
this.parentNode.style.top = divObj.scrollTop + 'px';
}
}
function sortNumeric(a,b){
a = a.replace(/,/,'.');
b = b.replace(/,/,'.');
a = a.replace(/[^\d\-\.\/]/g,'');
b = b.replace(/[^\d\-\.\/]/g,'');
if(a.indexOf('/')>=0)a = eval(a);
if(b.indexOf('/')>=0)b = eval(b);
return a/1 - b/1;
}
function sortString(a, b) {
// TA BORT APOSTROFER
// ------------------
// a, b = hela orden
// Om: á,é,í,ó,ú -> gör om till a,e,i,o,u
a = a.replace(/á/, "a");
b = b.replace(/á/, "a");
a = a.replace(/é/, "e");
b = b.replace(/é/, "e");
a = a.replace(/í/, "i");
b = b.replace(/í/, "i");
a = a.replace(/ó/, "o");
b = b.replace(/ó/, "o");
a = a.replace(/ú/, "u");
b = b.replace(/ú/, "u");
a = a.replace(/ñ/, "n");
b = b.replace(/ñ/, "n");
if ( a.toUpperCase() < b.toUpperCase() ) return -1;
if ( a.toUpperCase() > b.toUpperCase() ) return 1;
return 0;
}
function cancelTableWidgetEvent()
{
return false;
}
function sortTable()
{
if(!tableWidget_okToSort)return;
tableWidget_okToSort = false;
/* Getting index of current column */
var obj = this;
var indexThis = 0;
while(obj.previousSibling){
obj = obj.previousSibling;
if(obj.tagName=='TD')indexThis++;
}
var images = this.getElementsByTagName('IMG');
if(this.getAttribute('direction') || this.direction){
direction = this.getAttribute('direction');
if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
if(direction=='ascending'){
direction = 'descending';
this.setAttribute('direction','descending');
this.direction = 'descending';
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
if(direction=='descending'){
images[0].style.display='inline';
images[0].style.visibility='visible';
images[1].style.display='none';
}else{
images[1].style.display='inline';
images[1].style.visibility='visible';
images[0].style.display='none';
}
var tableObj = this.parentNode.parentNode.parentNode;
var tBody = tableObj.getElementsByTagName('TBODY')[0];
var widgetIndex = tableObj.id.replace(/[^\d]/g,'');
var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
var images = activeColumn[widgetIndex].getElementsByTagName('IMG');
images[0].style.display='none';
images[1].style.display='inline';
images[1].style.visibility = 'hidden';
if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');
}
activeColumn[widgetIndex] = this;
var cellArray = new Array();
var cellObjArray = new Array();
for(var no=1;no<tableObj.rows.length;no++){
var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
cellArray.push(content);
cellObjArray.push(tableObj.rows[no].cells[indexThis]);
}
if(sortMethod=='N'){
cellArray = cellArray.sort(sortNumeric);
}else{
cellArray = cellArray.sort(sortString);
}
if(direction=='descending'){
for(var no=cellArray.length;no>=0;no--){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}else{
for(var no=0;no<cellArray.length;no++){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}
for(var no2=0;no2<cellObjArray.length;no2++){
cellObjArray[no2].removeAttribute('allreadySorted');
}
tableWidget_okToSort = true;
}
/* START FUNCTION */
function initTableWidget(objId,sortArray)
{
var obj = document.getElementById(objId);
obj.parentNode.className='widget_tableDiv';
if(navigator.userAgent.indexOf('MSIE')>=0){
obj.parentNode.style.overflowY = 'auto';
}
tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
obj.id = 'tableWidget' + tableWidget_tableCounter;
addEndCol(obj);
obj.cellSpacing = 0;
obj.cellPadding = 0;
obj.className='tableWidget';
var tHead = obj.getElementsByTagName('THEAD')[0];
var cells = tHead.getElementsByTagName('TD');
for(var no=0;no<3;no++){
cells[no].className = 'tableWidget_headerCell';
cells[no].onselectstart = cancelTableWidgetEvent;
if(no==cells.length-1){
cells[no].style.borderRight = '0px';
}
if(sortArray[no]){
cells[no].onmouseover = highlightTableHeader;
cells[no].onmouseout = deHighlightTableHeader;
cells[no].onmousedown = mousedownTableHeader;
cells[no].onmouseup = highlightTableHeader;
cells[no].onclick = sortTable;
var img = document.createElement('IMG');
img.src = arrowImagePath + 'arr_up.png';
cells[no].appendChild(img);
img.style.visibility = 'hidden';
var img = document.createElement('IMG');
img.src = arrowImagePath + 'arr_down.png';
cells[no].appendChild(img);
img.style.display = 'none';
}
else{
cells[no].style.cursor = 'default';
}
}
tableWidget_tableCounter++;
}
</script>
</head>
<body>
<div class="widget_tableDiv">
<table id="myTable">
<thead>
<tr>
<td>COL 1</td>
<td>COL 2</td>
<td>
bilder
</td>
</tr>
</thead>
<tbody class="scrollingContent">
<tr>
<td>
test col 1 rad 1
</td>
<td>
test col 2 rad 1
</td>
<td>
bild 1
</td>
</tr>
<!-- hundratals poster här -->
<tr>
<td>
test col 1 rad n
</td>
<td>
test col 2 rad 2n
</td>
<td>
bild n
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
initTableWidget('myTable',Array('S','S', false));
</script>
</body>
</html>
Bro!
