logo   Table Sorter




Dokumentation for Table Sorter kan ses her table sorter


Ofte kan det være hensigtsmæssigt at kunne sortere en tabel baseret på stigende eller faldende værdier i en vilkårlig kolonne.


Table Sorter er (tilsyneladende) et af de bedre og mere funktionsrige blandt mange jQuery programmer, der kan anvendes til formålet. Det har endvidere den gode reference, at det anvendes i phpMyAdmin.


For at Table Sorter kan arbejde med en tabel, skal den være opbygget med THEAD og TBODY - og TFOOT hvis tabellen afsluttes med en sumlinie.


Det er kun linierne i TBODY der bliver sorteret.


Table Sorter er ganske enkel at tage i brug i default versionen. Med det udgangspunkt kan der foretages tilpasninger med ca. 70 optioner (se nedenfor). Endvidere kan der tilknyttes funktionalitet til 'Pagination'.


<table class="sortable">
<thead>
<tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
<tbody>
<tr><td>Jan Molby</td><td>£12,000</td></tr>
<tr><td>Steve Nicol</td><td>£8,500</td></tr>
<tr><td>Steve McMahon</td><td>£9,200</td></tr>
<tr><td>John Barnes</td><td>£15,300</td></tr>
</tbody>
<tfoot>
<tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>




Installation


Table Sorter kan downloades her table sorter. Den downloadede mappe har navnet mottie-tablesorter-v. ....... .zip.


Efter download foretages udpakning udenfor sitets filstruktur (downloadet indeholder meget, der ikke er driftsrelevant.


Lige over sitets rod etableres mappen tablesorter og mapperne addons, css og js kopieres dertil. De 3 mapper indeholder al driftsrelevant kode.




Grundopsætning


I head på sider der indeholder en tabel, der skal sorteres indsættes:


<!-- TABLE SORTER -->
<!-- choose a theme file -->
<link rel="stylesheet" href="tablesorter/css/theme.default.css">
<!-- load jQuery and tablesorter scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="tablesorter/js/jquery.tablesorter.min.js"></script>
<!-- tablesorter widgets (optional) -->
<script type="text/javascript" src="tablesorter/js/jquery.tablesorter.widgets.min.js"></script>


Der foretages den nødvendige tilpasning af stier til programmerne i tablesorter-mappen og link til CDN-server (her Google).


Nederst i head eller i body indsættes denne "lytter":


<script>
$(function(){
$("#tabelnavn").tablesorter();
});
</script>


Samme tabelnavn kan benyttes for tabeller, der skal behandles ens.


I table-tagget for den tabel, der skal kunne sorteres indsættes:


<table id="tabelnavn" class="tablesorter">


"tabelnavn" etablerer forbindelse mellem tabellen og lytteren, der etablerer forbindelse videre til javaScript-programmet. "tablesorter" etablerer forbindelse til TableSorter's egen css-fil.




Optioner


I event-lytteren kan indsættes en lang række optioner / parametre table sorter for, hvordan TableSorter skal agere overfor den enkelte tabel, når standard ikke er god nok.


<script>
$(function(){
$("#tabelnavn").tablesorter(
{
..indsæt her --
}
);
});
</script>


Indsæt {} i () for funktionen tablesorter og indsæt optionerne deri. De enkelte optioner skal kommasepareres. (Undlad komma ved sidste).


<script>
$(function(){
$("#myTable").tablesorter(
{
dateFormat: "ddmmyyyy",
usNumberFormat: false,
theme: 'green',
widgets: ['zebra', 'columns']
}
);
});
</script>


Ovenfor sættes:
- dato som ddmmyyyy
- decimaltegn som komma
- grønt farvetema for listen
- linier med lige farvenummer får en farve og linier med ulige nummer får en anden farve i temaets nuancer.


Kolonner udenfor sortering


Ofte giver det ikke mening at kunne sortere på en kolonne. Den kan friholdes på flere måder, men den nemmeste og enkleste er direkte i kolonnens <th>-tag table sorter.


<th class='sorter-false'> ...... </th>
























x
x