Posted By

lukaz on 12/04/09


Tagged

javascript jquery


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

verostudios


tablesorter - jQuery plugin usage


 / Published in: jQuery
 

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/

  1. <style>
  2. table {
  3. table-layout:auto;
  4. border-collapse:collapse;
  5. border-color:grey;
  6. }
  7.  
  8. th {
  9. background-repeat: no-repeat;
  10. background-position: center left;
  11. margin-left: -1px;
  12. padding-left: 20px;
  13. }
  14.  
  15. th.header {
  16. background-image: url(http://www.polet.cz/images/examples/small.gif);
  17. cursor: pointer;
  18. font-weight: bold;
  19. background-position: center left;
  20. padding-left: 20px;
  21. }
  22.  
  23. th.header:hover {
  24. cursor: pointer;
  25. font-weight: bold;
  26. background-repeat: no-repeat;
  27. background-position: center left;
  28. padding-left: 20px;
  29. }
  30.  
  31. th.headerSortUp {
  32. background-image: url(http://www.polet.cz/images/examples/asc.gif);
  33. }
  34.  
  35. th.headerSortDown {
  36. background-image: url(http://www.polet.cz/images/examples/desc.gif);
  37. }
  38. </style>
  39.  
  40. <script type="text/javascript" src="http://www.polet.cz/examples/jquery-1.3.1.js"></script>
  41. <script type="text/javascript" src="http://www.polet.cz/examples/jquery.tablesorter.js"></script>
  42. <script type="text/javascript">
  43.  
  44. $(document).ready(function()
  45. {
  46. $("#table1").tablesorter(
  47. {
  48. /* Initial sort by first [[column],[asc]] */
  49. sortList: [[0,0]],
  50.  
  51. /* Turns off sorting ability for 3rd column */
  52. headers: {
  53. 2: {
  54. sorter: false
  55. },
  56. }
  57. });
  58. });
  59. </script>
  60.  
  61. <table id="table1" border="1" cellpadding="5px">
  62. <thead>
  63. <tr>
  64. <th>Letter</th>
  65. <th>Digit</th>
  66. <th>Not sortable column</td>
  67. <th>URL</td>
  68. </tr>
  69. </thead>
  70. <tbody>
  71. <tr>
  72. <td>a</td>
  73. <td>9</td>
  74. <td>1</td>
  75. <td><a href=''>http://example/a9</a></td>
  76. </tr>
  77. <tr>
  78. <td>b</td>
  79. <td>1</td>
  80. <td>2</td>
  81. <td><a href=''>http://example/b1</a></td>
  82. </tr>
  83. <tr>
  84. <td>c</td>
  85. <td>2</td>
  86. <td>3</td>
  87. <td><a href=''>http://example/c2</a></td>
  88. </tr>
  89. <tr>
  90. <td>d</td>
  91. <td>8</td>
  92. <td>4</td>
  93. <td><a href=''>http://example/d8</a></td>
  94. </tr>
  95. <tr>
  96. <td>e</td>
  97. <td>6</td>
  98. <td>5</td>
  99. <td><a href=''>http://example/e6</a></td>
  100. </tr>
  101. <tr>
  102. <td>f</td>
  103. <td>5</td>
  104. <td>6</td>
  105. <td><a href=''>http://example/f5</a></td>
  106. </tr>
  107. </tbody>
  108. </table>

Report this snippet  

You need to login to post a comment.