Revision: 21156
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at December 4, 2009 14:58 by lukaz
Initial Code
<style> table { table-layout:auto; border-collapse:collapse; border-color:grey; } th { background-repeat: no-repeat; background-position: center left; margin-left: -1px; padding-left: 20px; } th.header { background-image: url(http://www.polet.cz/images/examples/small.gif); cursor: pointer; font-weight: bold; background-position: center left; padding-left: 20px; } th.header:hover { cursor: pointer; font-weight: bold; background-repeat: no-repeat; background-position: center left; padding-left: 20px; } th.headerSortUp { background-image: url(http://www.polet.cz/images/examples/asc.gif); } th.headerSortDown { background-image: url(http://www.polet.cz/images/examples/desc.gif); } </style> <script type="text/javascript" src="http://www.polet.cz/examples/jquery-1.3.1.js"></script> <script type="text/javascript" src="http://www.polet.cz/examples/jquery.tablesorter.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#table1").tablesorter( { /* Initial sort by first [[column],[asc]] */ sortList: [[0,0]], /* Turns off sorting ability for 3rd column */ headers: { 2: { sorter: false }, } }); }); </script> <table id="table1" border="1" cellpadding="5px"> <thead> <tr> <th>Letter</th> <th>Digit</th> <th>Not sortable column</td> <th>URL</td> </tr> </thead> <tbody> <tr> <td>a</td> <td>9</td> <td>1</td> <td><a href=''>http://example/a9</a></td> </tr> <tr> <td>b</td> <td>1</td> <td>2</td> <td><a href=''>http://example/b1</a></td> </tr> <tr> <td>c</td> <td>2</td> <td>3</td> <td><a href=''>http://example/c2</a></td> </tr> <tr> <td>d</td> <td>8</td> <td>4</td> <td><a href=''>http://example/d8</a></td> </tr> <tr> <td>e</td> <td>6</td> <td>5</td> <td><a href=''>http://example/e6</a></td> </tr> <tr> <td>f</td> <td>5</td> <td>6</td> <td><a href=''>http://example/f5</a></td> </tr> </tbody> </table>
Initial URL
Initial Description
I found the tablesorter - jQuery plugin cool and easy to-be implemented. Plugin is written by Christian Bach and my snippet uses tablesorter version 2.0.3. Images are stored on my server as well as inlcuded .js files in example directory. Project's site: http://tablesorter.com/
Initial Title
tablesorter - jQuery plugin usage
Initial Tags
javascript, jquery
Initial Language
jQuery