<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../css/jqx.base.css">
    <link rel="stylesheet" href="../css/jqx.darkblue.css">
    <link rel="stylesheet" href="../css/bs-tablesorter.css">

    <title>Tablesorter</title>
</head>
<body>

<table id="thetable" class="table">
    <thead>
    <tr>
        <th class="group-number-10">Head A</th>
        <th class="group-false">Head B</th>
        <th class="group-false">Head C</th>
        <th class="group-false">Head D</th>
        <th class="group-false">Head E</th>
        <th class="group-false">Head F</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>01.01.1970</td>
        <td>SFr. -1.00</td>
        <td>a</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>2</td>
        <td>02.02.1970</td>
        <td>SFr. 0.00</td>
        <td>b</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>3</td>
        <td>05.03.1970</td>
        <td>SFr. 2.00</td>
        <td>c</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>4</td>
        <td>06.04.1970</td>
        <td>SFr. 0.00</td>
        <td>d</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>5</td>
        <td>08.05.1970</td>
        <td>SFr. 1.00</td>
        <td>e</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>6</td>
        <td>09.06.1970</td>
        <td>SFr. 3.00</td>
        <td>f</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>7</td>
        <td>10.07.1970</td>
        <td>SFr. 1.00</td>
        <td>g</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>8</td>
        <td>11.08.1970</td>
        <td>SFr. 2.00</td>
        <td>h</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>9</td>
        <td>12.09.1970</td>
        <td>SFr. 4.00</td>
        <td>I</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>10</td>
        <td>14.10.1970</td>
        <td>SFr. 2.00</td>
        <td>j</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>11</td>
        <td>14.11.1970</td>
        <td>SFr. 3.00</td>
        <td>k</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>12</td>
        <td>16.12.1970</td>
        <td>SFr. 5.00</td>
        <td>l</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>13</td>
        <td>17.01.1970</td>
        <td>SFr. 6.10</td>
        <td>m</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>14</td>
        <td>18.02.1970</td>
        <td>SFr. 6.01</td>
        <td>n</td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td>15</td>
        <td>21.03.1970</td>
        <td>SFr. 6.00</td>
        <td>o</td>
        <td> </td>
        <td> </td>
    </tr>
    </tbody>
</table>

<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.tablesorter.min.js"></script>
<script src="../js/jquery.tablesorter.widgets.min.js"></script>
<script src="../js/widget-grouping.min.js"></script>
<script src="../js/jqx-all.js"></script>

<script>

    $(function() {
        $("#thetable").tablesorter({
            theme: 'bootstrap',
            dateFormat: 'ddmmyyyy',
            widgets: ['group']
        });
    });

</script>

</body>
</html>