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

Dateigrösse: 3.74 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>CSS sortable Tables</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 rel="stylesheet" type="text/css" href="css/demo.css" />
</head>

<body>

<h3>CSS TableStyle</h3>

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series" style="border:0">
 <caption>Table 1: Power Mac G5 tech specs </caption>
  <tr>
    <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
    <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
    <th scope="col" abbr="Dual 2">Dual 2GHz</th>
    <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
  </tr>
  <tr>
    <th scope="row" abbr="Model" class="spec">Model</th>
    <td>M9454LL/A</td>
    <td>M9455LL/A</td>
    <td>M9457LL/A</td>
  </tr>
  <tr>
    <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
    <td class="alt">Dual 1.8GHz PowerPC G5</td>
    <td class="alt">Dual 2GHz PowerPC G5</td>
    <td class="alt">Dual 2.5GHz PowerPC G5</td>
  </tr>
  <tr>
    <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
    <td>900MHz per processor</td>
    <td>1GHz per processor</td>
    <td>1.25GHz per processor</td>
  </tr>
  <tr>
    <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
  </tr>
</table>

<br />
<hr />

<h3>TableSort (revisited) demo</h3>
  <h4>JavaScript initiated sort test</h4>

  <p><code>class="rowstyle-alt colstyle-alt no-arrow"</code></p>
  <table id="test1" cellpadding="0" cellspacing="0" border="0" class="rowstyle-alt colstyle-alt no-arrow">
    <thead>
      <tr>
        <th class="sortable-text">First Name</th>
        <th class="sortable-text">Last Name</th>
        <th class="sortable-numeric">Age</th>
        <th class="sortable-numeric">Score</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Peter</td>
        <td>Friel</td>
        <td>37</td>
        <td>20%</td>
      </tr>
      <tr class="alt">
        <td>Robert</td>
        <td>Preen</td>
        <td>33</td>
        <td>25%</td>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Lords</td>
        <td>18</td>
        <td>78%</td>
      </tr>
      <tr class="alt">
        <td>Peter</td>
        <td>Just</td>
        <td>18</td>
        <td>44%</td>
      </tr>
      <tr>
        <td>Freddy</td>
        <td>Cummins</td>
        <td>17</td>
        <td>52%</td>
      </tr>
    </tbody>
  </table>
  
  <form action="" method="post">
    <p>
      <button type="button" name="b1" onclick="fdTableSort.jsWrapper('test1', [0,3])">Sort columns 0 &amp; 3</button>
      <button type="button" name="b2" onclick="fdTableSort.jsWrapper('test1', [0,2])">Sort columns 0 &amp; 2</button>
      <button type="button" name="b3" onclick="fdTableSort.jsWrapper('test1', [0])">Sort column 0</button>
    </p>
  </form>
  
  <p>TableSort jQuery<a href="http://tablesorter.com/docs/index.html">Tablesorter</a></p>

<br />
<hr />

</body>
</html>