Quelltext der Datei: http://www.michaelster.ch/jsTestFolder/css_tablestyle_plus_createTableJS.htm

Dateigrösse: 6.28 kb

[Anzeige ohne Zeilennummern]

1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited -->
        
        <title>Dynamic Table Creation Sort Timings (100 row table)</title>
        
    <script type="text/javascript" src="css/tablesort.js"></script>  
    <script type="text/javascript" src="css/paginate.js"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link type="text/css" href="css/demo.css" rel="stylesheet" />
  
    <script type="text/javascript">
    function resetTable() {

        var rowCnt = document.getElementById("rowCnt").options[document.getElementById("rowCnt").selectedIndex].value;
        var table = document.getElementById("ezrapound");
        if(table) table.parentNode.removeChild(table);
        table     = document.createElement("table");
        var tr    = document.createElement("tr");
        var thead = document.createElement("thead");
        var tbody = document.createElement('tbody');
        var th    = document.createElement("th");
        var trc   = tr.cloneNode(true);
        var thc;

        table.id = "ezrapound";
        table.className = "no-arrow rowstyle-alt";
        table.cellspacing = table.cellpadding = 0
        document.getElementsByTagName('body')[0].appendChild(table);
        thead.appendChild(trc);
        table.appendChild(thead);
        table.appendChild(tbody);
        table = null;

        var h = [["Row","sortable-numeric"], ["Rndm. Date","sortable-date"] ,["Rndm. Number","sortable-numeric"],["Rndm. Alphabet Substring","sortable-text"]];
        for(var j = 0; j < 4; j++) {
                thc = th.cloneNode(false);
                trc.appendChild(thc);
                thc.className = h[j][1];
                thc.appendChild(document.createTextNode(h[j][0]));
                thc = null;
        };
        
        trc = thead = null;
        
        var td1, td2, td3, td4;
        
        for(var i = 0; i < rowCnt; i++) {
                trc = tr.cloneNode(false);
                tbody.appendChild(trc);
                addCells(trc, i);
        }

        tbody = null;
        
        var ctrl = document.getElementById("controls");
        
        if(ctrl.getElementsByTagName("a").length == 1) {
                var a     = document.createElement("a");
                a.href    = "#";
                a.onclick = addRow;
        
                a.appendChild(document.createTextNode("Add New Row"));
        
                ctrl.appendChild(document.createTextNode(" | "));
                ctrl.appendChild(a);
        
                a = null;
        }
        
        fdTableSort.init();
        
        return false;
    }

    function addCells(tr, cnt) {

        function m2c(txt) { return String(txt).length < 2 ? "00".substring(2- (String(txt).length || 0)) + txt : txt; }

        if(cnt % 2) tr.className = "alt";
        
        var td1 = document.createElement("td");
        tr.appendChild(td1);
        td1.appendChild(document.createTextNode(cnt));

        var td2 = document.createElement("td");
        tr.appendChild(td2);
        date = m2c(Math.floor(Math.random()*27)+1) + "/" + m2c(Math.floor(Math.random()*11) + 1) + "/" + (1970 + Math.floor(Math.random()*38));
        td2.appendChild(document.createTextNode(date));

        var td3 = document.createElement("td");
        tr.appendChild(td3);
        td3.appendChild(document.createTextNode(Math.floor(Math.random()*400)));

        var td4 = document.createElement("td");
        tr.appendChild(td4);
        td4.className = "lft";
        td4.appendChild(document.createTextNode("abcdefghijklmnopqrstuvwxyz".substring(0,Math.floor(Math.random()*26)+1)));

        td1 = td2 = td3 = td4 = null;
    }

    // Wouldn't it be nice to have static variables in JavaScript...
    var t = new Date();

    function sortInitiatedCallback(tableId) {
        t = new Date();
    }

    function sortCompleteCallback(tableId) {
        document.getElementById('timedisp').innerHTML = "Time to sort: <em>" + (new Date() - t) + "ms</em>";
    }

    function setUp() {
        document.getElementsByTagName("form")[0].onsubmit = resetTable;
    }

    fdTableSort.addEvent(window, "load", setUp);
    
    </script>
    
</head>
<body>


<h4>Dynamic Table Sort Timings <small>(100 row table)</small></h4>
<table cellpadding="0" cellspacing="0" border="0" id="results">
  <caption>Example Test Results (P.C: 2.8GHz, 512M, Windows XP)</caption>
  <thead>
    <tr>
      <th>Browser</th>
      <th>Initial Sort (milliseconds)</th>
      <th>Following Sorts (milliseconds)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rht">FireFox 2</td>
      <td>156ms &#150; 157ms</td>
      <td>47ms &#150; 110ms</td>
    </tr>
    <tr class="alt">
      <td class="rht">Internet Explorer 6</td>
      <td>265ms &#150; 312ms</td>
      <td>146ms &#150; 187ms</td>
    </tr>
    <tr>
      <td class="rht">Opera 9</td>
      <td>203ms &#150; 218ms</td>
      <td>140ms &#150; 157ms</td>
    </tr>
    <tr class="alt">
      <td class="rht">Safari 3.0.3 (Windows)</td>
      <td>90ms &#150; 93ms</td>
      <td>31ms &#150; 47ms</td>
    </tr>
  </tbody>
</table>

<h4>dynamic table creation test</h4>
<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>
<form method="post" action="">
  <p>
      <input type="submit" name="go" id="go" value="Create" /> a 
        <select id="rowCnt" name="rowCnt">
            <option value="100">100</option>
            <option value="250">250</option>
            <option value="500">500</option>
        </select> row table
    </p>
</form>
<p id="controls"></p>
<p id="timedisp">Sort time will be displayed here</p>
<p><em>Note: Hold down the shift key to select multiple columns to sort</em></p>

</body>
</html>