Dateigrösse: 6.28 kb
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 5 <!-- http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited --> 6 7 <title>Dynamic Table Creation Sort Timings (100 row table)</title> 8 9 <script type="text/javascript" src="css/tablesort.js"></script> 10 <script type="text/javascript" src="css/paginate.js"></script> 11 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 12 <link rel="stylesheet" type="text/css" href="css/styles.css" /> 13 <link type="text/css" href="css/demo.css" rel="stylesheet" /> 14 15 <script type="text/javascript"> 16 function resetTable() { 17 18 var rowCnt = document.getElementById("rowCnt").options[document.getElementById("rowCnt").selectedIndex].value; 19 var table = document.getElementById("ezrapound"); 20 if(table) table.parentNode.removeChild(table); 21 table = document.createElement("table"); 22 var tr = document.createElement("tr"); 23 var thead = document.createElement("thead"); 24 var tbody = document.createElement('tbody'); 25 var th = document.createElement("th"); 26 var trc = tr.cloneNode(true); 27 var thc; 28 29 table.id = "ezrapound"; 30 table.className = "no-arrow rowstyle-alt"; 31 table.cellspacing = table.cellpadding = 0 32 document.getElementsByTagName('body')[0].appendChild(table); 33 thead.appendChild(trc); 34 table.appendChild(thead); 35 table.appendChild(tbody); 36 table = null; 37 38 var h = [["Row","sortable-numeric"], ["Rndm. Date","sortable-date"] ,["Rndm. Number","sortable-numeric"],["Rndm. Alphabet Substring","sortable-text"]]; 39 for(var j = 0; j < 4; j++) { 40 thc = th.cloneNode(false); 41 trc.appendChild(thc); 42 thc.className = h[j][1]; 43 thc.appendChild(document.createTextNode(h[j][0])); 44 thc = null; 45 }; 46 47 trc = thead = null; 48 49 var td1, td2, td3, td4; 50 51 for(var i = 0; i < rowCnt; i++) { 52 trc = tr.cloneNode(false); 53 tbody.appendChild(trc); 54 addCells(trc, i); 55 } 56 57 tbody = null; 58 59 var ctrl = document.getElementById("controls"); 60 61 if(ctrl.getElementsByTagName("a").length == 1) { 62 var a = document.createElement("a"); 63 a.href = "#"; 64 a.onclick = addRow; 65 66 a.appendChild(document.createTextNode("Add New Row")); 67 68 ctrl.appendChild(document.createTextNode(" | ")); 69 ctrl.appendChild(a); 70 71 a = null; 72 } 73 74 fdTableSort.init(); 75 76 return false; 77 } 78 79 function addCells(tr, cnt) { 80 81 function m2c(txt) { return String(txt).length < 2 ? "00".substring(2- (String(txt).length || 0)) + txt : txt; } 82 83 if(cnt % 2) tr.className = "alt"; 84 85 var td1 = document.createElement("td"); 86 tr.appendChild(td1); 87 td1.appendChild(document.createTextNode(cnt)); 88 89 var td2 = document.createElement("td"); 90 tr.appendChild(td2); 91 date = m2c(Math.floor(Math.random()*27)+1) + "/" + m2c(Math.floor(Math.random()*11) + 1) + "/" + (1970 + Math.floor(Math.random()*38)); 92 td2.appendChild(document.createTextNode(date)); 93 94 var td3 = document.createElement("td"); 95 tr.appendChild(td3); 96 td3.appendChild(document.createTextNode(Math.floor(Math.random()*400))); 97 98 var td4 = document.createElement("td"); 99 tr.appendChild(td4); 100 td4.className = "lft"; 101 td4.appendChild(document.createTextNode("abcdefghijklmnopqrstuvwxyz".substring(0,Math.floor(Math.random()*26)+1))); 102 103 td1 = td2 = td3 = td4 = null; 104 } 105 106 // Wouldn't it be nice to have static variables in JavaScript... 107 var t = new Date(); 108 109 function sortInitiatedCallback(tableId) { 110 t = new Date(); 111 } 112 113 function sortCompleteCallback(tableId) { 114 document.getElementById('timedisp').innerHTML = "Time to sort: <em>" + (new Date() - t) + "ms</em>"; 115 } 116 117 function setUp() { 118 document.getElementsByTagName("form")[0].onsubmit = resetTable; 119 } 120 121 fdTableSort.addEvent(window, "load", setUp); 122 123 </script> 124 125 </head> 126 <body> 127 128 129 <h4>Dynamic Table Sort Timings <small>(100 row table)</small></h4> 130 <table cellpadding="0" cellspacing="0" border="0" id="results"> 131 <caption>Example Test Results (P.C: 2.8GHz, 512M, Windows XP)</caption> 132 <thead> 133 <tr> 134 <th>Browser</th> 135 <th>Initial Sort (milliseconds)</th> 136 <th>Following Sorts (milliseconds)</th> 137 </tr> 138 </thead> 139 <tbody> 140 <tr> 141 <td class="rht">FireFox 2</td> 142 <td>156ms – 157ms</td> 143 <td>47ms – 110ms</td> 144 </tr> 145 <tr class="alt"> 146 <td class="rht">Internet Explorer 6</td> 147 <td>265ms – 312ms</td> 148 <td>146ms – 187ms</td> 149 </tr> 150 <tr> 151 <td class="rht">Opera 9</td> 152 <td>203ms – 218ms</td> 153 <td>140ms – 157ms</td> 154 </tr> 155 <tr class="alt"> 156 <td class="rht">Safari 3.0.3 (Windows)</td> 157 <td>90ms – 93ms</td> 158 <td>31ms – 47ms</td> 159 </tr> 160 </tbody> 161 </table> 162 163 <h4>dynamic table creation test</h4> 164 <p>There will be a slight increase in the time taken to sort the very first time the table is sorted as the internal data cache is created. All subsequent sorts will be much quicker.</p> 165 <form method="post" action=""> 166 <p> 167 <input type="submit" name="go" id="go" value="Create" /> a 168 <select id="rowCnt" name="rowCnt"> 169 <option value="100">100</option> 170 <option value="250">250</option> 171 <option value="500">500</option> 172 </select> row table 173 </p> 174 </form> 175 <p id="controls"></p> 176 <p id="timedisp">Sort time will be displayed here</p> 177 <p><em>Note: Hold down the shift key to select multiple columns to sort</em></p> 178 179 </body> 180 </html> 181