Great looking client side sortable html table

/ Published in: C#
Save to your folder(s)

This assumes you're using the jquery tablesorter plugin

Copy this code and paste it in your HTML
  1. <table cellspacing="1" class="tablesorter">
  2. <thead>
  3. <tr>
  4. <th>&nbsp;</th>
  5. <th class="header">Case</th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr class="even">
  10. <td>test</td>
  11. </tr>
  12. </tbody>
  13. </table>
  15. //css
  16. table.tablesorter {margin:10px 0pt 15px; width: 100%; background-color:#CDCDCD; text-align: left;}
  17. table.tablesorter thead tr th, table.tablesorter tfoot tr th {border: 1px solid #FFF; background-color:#F0F0F6; padding: 4px;}
  18. table.tablesorter thead tr .header {background-image: url(/App_Themes/Theme1/Images/bg.gif); background-repeat: no-repeat; background-position: center right; cursor: pointer;}
  19. table.tablesorter tbody td {color: #3D3D3D; padding: 4px; vertical-align: top; }
  20. table.tablesorter tbody tr.odd td {background-color:#F0F0F6;}
  21. table.tablesorter tbody tr.even td {background-color:#FFFFFF;}
  22. table.tablesorter thead tr .headerSortUp {background-image: url(/App_Themes/Theme1/Images/asc.gif);}
  23. table.tablesorter thead tr .headerSortDown {background-image: url(/App_Themes/Theme1/Images/desc.gif);}
  24. table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {background-color: #FFFFEF;}

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.