perlunity.de | Javascript : DHTML - Tabelle sortieren | Die Community für Perl PHP CGI Apache MySQL und Javascript

perlunity.de - PERL | JAVASCRIPT | PHP | MySQL | APACHE


	#!/COMMUNITY Members: 5374 davon online: 1 weitere User: 24

04.02.2012 / 13:17

Community-Member werden | Paßwort vergessen | OnlineMonitor (1)

Wer ist online ... OnlineMonitor starten !

Javascript » DHTML » Tabelle sortieren
zur Übersicht

Kategorie DHTML

Bezeichnung Tabelle sortieren

ScriptDemo Neues Fenster für Demo öffnen

Statistik 25324 Aufrufe davon 0x gestern

Keine Beschreibung vorhanden.

Javascript-Quellcode (einfach markieren, kopieren und lokal abspeichern)

<script> //Sortable table script- Han Yu han@velocityhsi.com var domok=document.all||document.getElementById if (domok) { //***************************************************************************** // Filename: sortTable.js // Description: This javascript file can be applied to convert record tables // in a HTML file to be client-side sortable by associating title columns with // sort events. // // COPYRIGHT (C) 2001 HAN J. YU, LIPING DAI // THIS PROGRAM IS FREE SOFTWARE; YOU CAN REDISTRIBUTE IT AND/OR MODIFY IT // UNDER THE TERMS OF THE GNU GENERAL PUBLIC LICENSE AS PUBLISHED BY THE FREE // SOFTWARE FOUNDATION; EITHER VERSION 2 OF THE LICENSE, OR (AT YOUR OPTION) // ANY LATER VERSION. THIS PROGRAM IS DISTRIBUTED IN THE HOPE THAT IT WILL BE // USEFUL, BUT WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF // MERCHANTABILITY OF FITNESS FOR A PARTICULAR PURPOSE. SEE THE GNU GENERAL // PUBLIC LICENSE FOR MORE DETAILS. // // YOU SHOULD HAVE RECEIVED A COPY OF THE GNU GENERAL PUBLIC LICENSE ALONG // WITH THIS PROGRAM; IF NOT, WRITE TO: // // THE FREE SOFTWARE FOUNDATION, INC., // 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA // // Bugs/Comments: han@velocityhsi.com // // Change History: // // 11-26-01: // o Made a few more settings configurable (i.e. data delimiter etc). // o Added a check for the browser type/version (>= IE 5.0 allowed). // 11-27-01: // o Used document.getElementById method to retrieve object // o Now supports both IE 5.0 or greater and Netscape 6.0 or greater // 11-28-01: // o Fixed the status display for Netscape. // o Fixed the cursor shape for Netscape. Used pointer instead of hand. // 11-29-01: // o Fixed a cursor bug for IE 5.5 //***************************************************************************** //***************************************************************************** // sortTable.js // // This script contains useful functions that can be used to convert ordinary // tables into sortable tables by modifying the HTML sources. // // Here is how one can do that. The following assumptions are required // for the tables to be sorted. // // 1. All the record columns must be the same lengh. Otherwise (i.e. the ones // that contain colspan) the rows will be ignored. // // 2. Row spans can not happen in the record rows though column spans // can be one of the record rows. // // 3. Row-spanned single column will be considered as title. // // To enable the sorting, simply include this javascript source file and // add an onLoad event to the <body> like below: // // <body onLoad='initTable("table1");initTable("table2");' ...> // // Note that all the tables that need to be sorted MUST contain ID tag. // So, if they do not exist, you must create one for each table that // needs to be sorted. //***************************************************************************** // Global variables var table; // Table object var rowArray = new Array(); // Data row array var titleRowArray = new Array(); // Contains title texts var titleRowCellArray = new Array(); // Dynamically constructed title cells var titleSpanCellArray = new Array(); // Title elelments from row-spanned var colSpanArray = new Array(); // Rows col-spanned var colTitleFilled = new Array(); // Indicates whether title is filled var sortIndex; // Selected index for sort var descending = false; // Descending order var nRow, actualNRow, maxNCol; // Various table stats var origColor; // Holds original default color var isIE; // True if IE var linkEventString = // What's insider <a> tag 'onMouseOver=\'setCursor(this);' + 'setColor(this,"selected");\' ' + 'onMouseOut=\'setColor(this,"default");\' ' + 'onClick=\'sortTable('; // Configurable constants var ascChr = "^"; // Symbol for ascending sort var desChr = "v"; // Symbol for descending sort var selectedColor = "blue"; // Color for sort focus var defaultColor = "black"; // Default color for sort off-focus var recDelimiter = '|'; // Char used as a record separator var titleFace = 'b'; // Specifies the HTML tag for titles var updownColor = 'gray'; // Specified the color for up/downs //***************************************************************************** // Main function. This is to be associated with onLoad event in <BODY>. // // IMPORTANT: This is the only function that needs to be included in the pages // to be sorted. The rest of the functions are simply called by this // function. //***************************************************************************** function initTable(obj) { // Check whether it's viewed by IE 5.0 or greater if (! checkBrowser()) return; // Local variables var countCol; var nChildNodes; var innerMostNode; var nColSpan, nRowSpannedTitleCol, colPos; var cell, cellText; var titleFound = false; var rNRowSpan, rNColSpan; // Initializing global table object variable if (obj.tagName == "TABLE") { // Assumes that the obj is THE OBJECT table = obj; } else { // Assumes that the obj is the id of the object table = document.getElementById(obj); } // Check whether it's an object if (table == null) return; // Check whether it's a table if (table.tagName != "TABLE") return; // Initializing the max col number with the size of last data row maxNCol = table.rows[table.rows.length-1].cells.length; // Initializing arrays rowArray = new Array(); colSpanArray = new Array(); colTitleFilled = new Array(); titleRowArray = new Array(); titleRowCellArray = new Array(); for (var i=0; i<maxNCol; i++) colTitleFilled[i] = false; // Setting the number of rows nRow = table.rows.length; // Should have at least 1 row if (nRow < 1) return; // Initialization of local variables actualNRow = 0; // Number of actual data rows rNRowSpan = 0; // Remaining rows in the row span rNColSpan = 0; // Remaining cols in the col span nRowSpannedTitleCol = 0; // Number of title cols from row span // Loop through rows for (var i=0; i<nRow; i++) { nColSpan = 1, colPos = 0; // Loop through columns // Initializing for (var j=0; j<table.rows[i].cells.length; j++) { // Do this iff title has not been found if (titleFound == false) { if (table.rows[i].cells[j].rowSpan > 1) { if (table.rows[i].cells[j].colSpan < 2) { titleSpanCellArray[colPos] = table.rows[i].cells[j]; colTitleFilled[colPos] = true; nRowSpannedTitleCol++; } if (table.rows[i].cells[j].rowSpan - 1 > rNRowSpan) { rNRowSpan = table. rows[i].cells[j]. rowSpan - 1; if (table.rows[i]. cells[j].colSpan > 1) rNColSpan = rNRowSpan + 1; } } } if (table.rows[i].cells[j].colSpan > 1 && rNColSpan == 0) { nColSpan = table.rows[i].cells[j].colSpan; colPos += nColSpan; } else { colPos++; } } // Setting up the title cells if (titleFound == false && nColSpan == 1 && rNRowSpan == 0 && rNColSpan == 0 && titleFound == false) { colSpanArray[i] = true; titleFound = true; // Using indivisual cell as an array element countCol = 0; for (var j=0; j<table.rows[i].cells.length + nRowSpannedTitleCol; j++) { if (colTitleFilled[j] != true) { titleRowCellArray[j] = table.rows[i].cells[countCol]; countCol++; } else { titleRowCellArray[j] = titleSpanCellArray[j]; } } } // Setting up the data rows else if (titleFound == true && nColSpan == 1 && rNRowSpan == 0) { for (var j=0; j<table.rows[i].cells.length; j++) { // Can't have row span in record rows ... if (table.rows[i].cells[j].rowSpan > 1) return; nChildNodes = table.rows[i]. cells[j].firstChild.childNodes. length; innerMostNode = table.rows[i]. cells[j].firstChild; while ( nChildNodes != 0) { innerMostNode = innerMostNode. firstChild; nChildNodes = innerMostNode. childNodes. length; } if (j == 0) { rowArray[actualNRow] = innerMostNode.data; } else { rowArray[actualNRow] += recDelimiter + innerMostNode.data; } } // Inconsistent col lengh for data rows if (table.rows[i].cells.length > maxNCol) return; actualNRow++; colSpanArray[i] = false; } else if (nColSpan == 1 && rNRowSpan == 0 && rNColSpan == 0 && titleFound == false) { colSpanArray[i] = false; } else { colSpanArray[i] = true; } // Counters for row/column spans if (rNRowSpan > 0) rNRowSpan--; if (rNColSpan > 0) rNColSpan--; } // If the row number is < 1, no need to do anything ... if (actualNRow < 1) return; // Re-drawing the title row for (var j=0; j<maxNCol; j++) { // If for some reason, the rows do NOT have any child, then // simply return ... if (titleRowCellArray[j].childNodes.length == 0) return; if (titleRowCellArray[j].firstChild != null) { nChildNodes = titleRowCellArray[j]. firstChild.childNodes.length; innerMostNode = titleRowCellArray[j].firstChild; while ( nChildNodes != 0) { innerMostNode = innerMostNode.firstChild; nChildNodes = innerMostNode. childNodes. length; } cellText = innerMostNode.data; } else { cellText = "column(" + j + ")"; } titleRowArray[j] = cellText; titleRowCellArray[j].innerHTML = '<a ' + linkEventString + j + ',' + '"' + table.id + '"' + ');\'>' + '<' + titleFace + '>' + cellText + '</' + titleFace +'></a>'; } } //***************************************************************************** // Function called when user clicks on a title to sort //***************************************************************************** function sortTable(index,obj) { // Re-inializing the table object initTable(obj); // Local variables var nChildNodes; var innerMostNode; var rowContent; var rowCount; var cell, cellText; var newTitle; // Can't sort past the max allowed column size if (index < 0 || index >= maxNCol) return; // Assignment of sort index sortIndex = index; // Doing the sort using JavaScript generic function for an Array rowArray.sort(compare); // Re-drawing the title row for (var j=0; j<maxNCol; j++) { cellText = titleRowArray[j]; cellText = '<' + titleFace +'>' + cellText + '</' + titleFace + '></a>'; newTitle = '<a ' + linkEventString + j + ',' + '"' + table.id + '"' + ');\'>' + cellText + '</a>'; if (j == sortIndex) { newTitle += ' <font color=' + updownColor + '>'; if (descending) newTitle += desChr; else newTitle += ascChr; newTitle += '</font>'; } titleRowCellArray[j].innerHTML = newTitle; } // Re-drawing the table rowCount = 0; for (var i=0; i<nRow; i++) { if (! colSpanArray[i]) { for (var j=0; j<maxNCol; j++) { rowContent = rowArray[rowCount]. split(recDelimiter); nChildNodes = table.rows[i].cells[j].firstChild. childNodes.length; innerMostNode = table.rows[i].cells[j].firstChild; while ( nChildNodes != 0) { innerMostNode = innerMostNode.firstChild; nChildNodes = innerMostNode. childNodes. length; } innerMostNode.data = rowContent[j]; } rowCount++; } } // Switching btw descending/ascending sort if (descending) descending = false; else descending = true; } //***************************************************************************** // Function to be used for Array sorting //***************************************************************************** function compare(a, b) { // Getting the element array for inputs (a,b) var aRowContent = a.split(recDelimiter); var bRowContent = b.split(recDelimiter); // Needed in case the data conversion is necessary var aToBeCompared, bToBeCompared; if (! isNaN(aRowContent[sortIndex])) aToBeCompared = parseInt(aRowContent[sortIndex], 10); else aToBeCompared = aRowContent[sortIndex]; if (! isNaN(bRowContent[sortIndex])) bToBeCompared = parseInt(bRowContent[sortIndex], 10); else bToBeCompared = bRowContent[sortIndex]; if (aToBeCompared < bToBeCompared) if (!descending) { return -1; } else { return 1; } if (aToBeCompared > bToBeCompared) if (!descending) { return 1; } else { return -1; } return 0; } //***************************************************************************** // Function to set the cursor //***************************************************************************** function setCursor(obj) { // Show hint text at the browser status bar window.status = "Sort by " + obj.firstChild.innerHTML; // Change the mouse cursor to hand or pointer if (isIE) obj.firstChild.style.cursor = "hand"; else obj.firstChild.style.cursor = "pointer"; } //***************************************************************************** // Function to set the title color //***************************************************************************** function setColor(obj,mode) { if (mode == "selected") { // Remember the original color if (obj.style.color != selectedColor) defaultColor = obj.style.color; obj.style.color = selectedColor; } else { // Restoring original color and re-setting the status bar obj.style.color = defaultColor; window.status = ''; } } //***************************************************************************** // Function to check browser type/version //***************************************************************************** function checkBrowser() { if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.indexOf("5.") >= 0) { isIE = true; return true; } // For some reason, appVersion returns 5 for Netscape 6.2 ... else if (navigator.appName == "Netscape" && navigator.appVersion.indexOf("5.") >= 0) { isIE = false; return true; } else return false; } } </script> </head> <body onLoad='if (domok) initTable("table0")'> <table ID="table0" border="1" width="100%" cellspacing="0" cellpadding="0" > <tr><th>Name</th><th>Punkte</th><th>Ranking</th></tr> <td width="33%">Rüdiger Sorglos</td> <td width="33%">84.3</td> <td width="34%">3</td> <tr> <td width="33%">Detlef Dotterblume</td> <td width="33%">87.8</td> <td width="34%">2</td> </tr> <tr> <td width="33%">Eckehart Dau</td> <td width="33%">69</td> <td width="34%">4</td> </tr> <tr> <td width="33%">Bruce Will</td> <td width="33%">97.5</td> <td width="34%">1</td> </tr> </table>

Kommentare zu Tabelle sortieren

18 Kommentar(e) vorhanden / Anzeige der neuesten 5

am 30.06.2006 um 13:40 Uhr von daizi
Super Script! Nachdem ich die leeren Tabellenzellen der MySQL-Datenbank gefüllt hatte, lie...

am 20.02.2006 um 12:45 Uhr von eanst
tolles script! funktioniert wunderbar...nur, die img-tags werden nicht sortiert. d.h. ...

am 17.07.2005 um 20:10 Uhr von Ariane
Ich könnt es auch mit der "Links-Sortierung" gebrauchen? Hat jemand nen Plan davon, wie da...

am 03.05.2005 um 14:39 Uhr von Klein Michael
Ich bräuchte einen fachkundigen in javascript für eine Anpassung dieses Scripts, denn die ...

am 02.07.2004 um 13:41 Uhr von naSh!
Hallo ElKassi, ich benötige ganz dringend deine Lösung für die Spans !! *&!§$! Forum hi...

Alle Kommentare anzeigen - Kommentar hinzufügen

Link: /javascript/scripts/javascript_0370_main.shtml .::. Aufrufe heute: 1 .::. Aufrufe gesamt: 21850