Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Sắp xếp dữ liệu
URL: https://www.javascriptbank.com/sort-data-table.html
Hiệu ứng tạo một bảng chứa các dữ liệu và người dùng có thể sắp xếp">sắp xếp theo thứ tự các dữ liệu này dựa vào các trường.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Sắp xếp dữ liệu
URL: https://www.javascriptbank.com/sort-data-table.html
<SCRIPT LANGUAGE="JavaScript"><!-- Begin// Andrew Berry ([email protected])function setDataType(cValue) { // THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY // SORTING WHEN IN THE SORT FUNCTION var isDate = new Date(cValue); if (isDate == "NaN") { if (isNaN(cValue)) { // THE VALUE IS A STRING, MAKE ALL CHARACTERS IN // STRING UPPER CASE TO ASSURE PROPER A-Z SORT cValue = cValue.toUpperCase(); return cValue; } else { // VALUE IS A NUMBER, TO PREVENT STRING SORTING OF A NUMBER // ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF // THE NUMBER WHEN IT IS A STRING var myNum; myNum = String.fromCharCode(48 + cValue.length) + cValue; return myNum; } } else { // VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND // AND RETURN THE STRING NUMBER //BUG - STRING AND NOT NUMERICAL SORT ..... // ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5 etc.) var myDate = new String(); myDate = isDate.getFullYear() + " " ; myDate = myDate + isDate.getMonth() + " "; myDate = myDate + isDate.getDate(); + " "; myDate = myDate + isDate.getHours(); + " "; myDate = myDate + isDate.getMinutes(); + " "; myDate = myDate + isDate.getSeconds(); //myDate = String.fromCharCode(48 + myDate.length) + myDate; return myDate ; } }function sortTable(col, tableToSort) { var iCurCell = col + tableToSort.cols; var totalRows = tableToSort.rows.length; var bSort = 0; var colArray = new Array(); var oldIndex = new Array(); var indexArray = new Array(); var bArray = new Array(); var newRow; var newCell; var i; var c; var j; // ** POPULATE THE ARRAY colArray WITH CONTENTS OF THE COLUMN SELECTED for (i=1; i < tableToSort.rows.length; i++) { colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText); iCurCell = iCurCell + tableToSort.cols; } // ** COPY ARRAY FOR COMPARISON AFTER SORT for (i=0; i < colArray.length; i++) { bArray[i] = colArray[i]; } // ** SORT THE COLUMN ITEMS //alert ( colArray ); colArray.sort(); //alert ( colArray ); for (i=0; i < colArray.length; i++) { // LOOP THROUGH THE NEW SORTED ARRAY indexArray[i] = (i+1); for(j=0; j < bArray.length; j++) { // LOOP THROUGH THE OLD ARRAY if (colArray[i] == bArray[j]) { // WHEN THE ITEM IN THE OLD AND NEW MATCH, PLACE THE // CURRENT ROW NUMBER IN THE PROPER POSITION IN THE // NEW ORDER ARRAY SO ROWS CAN BE MOVED .... // MAKE SURE CURRENT ROW NUMBER IS NOT ALREADY IN THE // NEW ORDER ARRAY for (c=0; c<i; c++) { if ( oldIndex[c] == (j+1) ) { bSort = 1; } } if (bSort == 0) { oldIndex[i] = (j+1); } bSort = 0; } } } // ** SORTING COMPLETE, ADD NEW ROWS TO BASE OF TABLE .... for (i=0; i<oldIndex.length; i++) { newRow = tableToSort.insertRow(); for (c=0; c<tableToSort.cols; c++) { newCell = newRow.insertCell(); newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML; } } //MOVE NEW ROWS TO TOP OF TABLE .... for (i=1; i<totalRows; i++) { tableToSort.moveRow((tableToSort.rows.length -1),1); } //DELETE THE OLD ROWS FROM THE BOTTOM OF THE TABLE .... for (i=1; i<totalRows; i++) { tableToSort.deleteRow(); } }// End --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE WIDTH="75%" BORDER=1 CELLSPACING=1 CELLPADDING=1 name="rsTable" id=rsTable cols=5><TR bgcolor=mediumblue><TD><A href="javascript:sortTable(0, rsTable);"><FONT color=white><B>ID</FONT></B></A></TD><TD><A href="javascript:sortTable(1, rsTable);"><FONT color=white><B>NAME</FONT></B></A></TD><TD><A href="javascript:sortTable(2, rsTable);"><FONT color=white><B>DATE</FONT></B></A></TD><TD><A href="javascript:sortTable(3, rsTable);"><FONT color=white><B>PHONE</FONT></B></A></TD><TD><A href="javascript:sortTable(4, rsTable);"><FONT color=white><B>WORKFLOW</FONT></B></A></TD></TR></FONT><TR><TD>1</TD><TD>Andy Berry</TD><TD>4/9/72</TD><TD>763-555-1212</TD><TD>REVIEW</TD></TR><TR><TD>2</TD><TD>Dan Developer</TD><TD>9/3/63</TD><TD>215-555-1400</TD><TD>SAME</TD></TR><TR><TD>3</TD><TD>John Javascript</TD><TD>3/4/71</TD><TD>612-555-0987</TD><TD>REVIEW</TD></TR><TR><TD>4</TD><TD>Jerry JSPage</TD><TD>8/2/71</TD><TD>215-555-7654</TD><TD>SAME</TD></TR><TR><TD>5</TD><TD>Mary Mainframe</TD><TD>3/28/70</TD><TD>763-555-8295</TD><TD>REVIEW</TD></TR><TR><TD>6</TD><TD>Elaine Ecommerce</TD><TD>2/28/29</TD><TD>612-555-1338</TD><TD>REVIEW</TD></TR><TR><TD>7</TD><TD>John Smith</TD><TD>12/31/00</TD><TD>610-555-0987</TD><TD>SAME</TD></TR><TR><TD>8</TD><TD>Candy Coder</TD><TD>4/1/70</TD><TD>000-555-9099</TD><TD>SAME</TD></TR><TR><TD>9</TD><TD>Pippy Long Stocking</TD><TD>1/1/30</TD><TD>613-555-1338</TD><TD>DIFFERENT</TD></TR><TR><TD>10</TD><TD>111222</TD><TD>2/2/01</TD><TD>345-555-7654</TD><TD>DIFFERENT</TD></TR><TR><TD>11</TD><TD>Apple Man</TD><TD>3/13/74</TD><TD>215-555-4043</TD><TD>DIFFERENT</TD></TR></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->