Tables sortable

To be able to sort tables is a nice feature, just take a look at one here: http://www.liv-laga.no/index.php/helsetjenestene/ansvarlige-myndigheter/fodested

It's not hard to do, if you follow the instructions here. It's taken/inspired from http://friedcellcollective.net/js/SortedTable/

Use Dreamweaver or some similar program for editing and uploading.

Put the following three JavaScripts on the site, for instance in the js-folder under your current template. http://www.liv-laga.no/templates/ja_edenite/js/SortedTable.js http://www.liv-laga.no/templates/ja_edenite/js/Event.js http://www.liv-laga.no/templates/ja_edenite/js/ekstra.js

To make sure the necessary things show up in every article, you have to tell index.php to include them. You may use the index.php in your template folder.

Line 35: <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/SortedTable.js"></script> <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/Event.js"></script> <script language="javascript" type="text/javascript" src="<?php echo $tmpTools->templateurl(); ?>/js/ekstra.js"></script>

Then edited the css in a separate file (call it tabell.css) and edited the index.php again. Line 31: <link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/tabell.css" type="text/css" />

http://www.liv-laga.no/templates/ja_edenite/css/tabell.css

To avoid that the footer moves to beside the table, put the table inside a div included in the tabell.css:

<div class="tabell">
<table class="sorted regroup" cellpadding="0" cellspacing="0">
<caption> Fødesteder i Norge, kan sorteres, klikk på overskrift </caption> <thead>
<tr>
<th class="sortedplus" id="RHF" width="50">RHF</th> 
<th id="HF" width="132">Helseforetak</th> 
<th id="institusjon">Institusjon</th> 
<th id="navn" width="84">Alt. navn</th> 
<th id="type" width="101">Type</th> 
<th id="2007" width="32">2007</th> 
<th id="2008" width="32">2008</th> 
<th id="adr" width="1288">Lenker</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td axis="string" headers="RHF">Midt</td>
<td axis="string" headers="HF">Nordmøre og Romsdal</td>
<td axis="string" headers="institusjon">Kristiansund</td>
<td axis="string" headers="navn"></td>
<td axis="string" headers="type">Fødeavd</td>
<td axis="number" headers="2007">397</td>
<td axis="number" headers="2008">422</td>
<td axis="string" headers="adr"><a href="http://www.helsenr.no/templates/StandardMaster____100099.aspx">Nettside</a></td>
</tr>
<tr>
<td axis="string" headers="RHF">Midt</td>
<td axis="string" headers="HF">Nordmøre og Romsdal</td>
<td axis="string" headers="institusjon">Molde</td>
<td axis="string" headers="navn"></td>
<td axis="string" headers="type">Fødeavd</td>
<td axis="number" headers="2007">563</td>
<td axis="number" headers="2008">542</td>
<td axis="string" headers="adr"><a href="http://www.helsenr.no/templates/StandardMaster____100100.aspx">Nettside</a></td>
</tr>
(...)
</tbody>
</table>
</div>

If you make the table in Excel, just copy it to Dreamweaver. Then use the Find and replace to remove unnecessary code and add new code. Add axis="string" to all td. Then copy the columns with numbers to a new file, and replaced string with number. Then mark the column (not the entire table) and copy-past it back to the original table. Use the same solution to add the headers to each td, copy one column at the time. You define the headers in the top row, <thead>