There are many table plugins out there, however, the majority of them try to add additional functionality that I simply do not need. I don't need sorting or pagination; I typically include sorting and pagination functionality through ajax or custom code. Because of this, I wrote this simple plugin that takes a datatable and adds jQuery ui styles to it. The primary purpose of the tableStyle plugin is to add jQuery UI styles to a datatable. The plugin is built using jQuery UI's Widget framework, therefore it follows the same api conventions as other jQuery UI widgets such as datepicker or dialog.

view plain print about
1$("#myTable").tableStyle();

The plugin only has two options.

view plain print about
1$("#myTable").tableStyle({
2    altClass: 'classnameone classnametwo',
3    hoverClass: 'classnameone classnametwo'
4});

The classnames in the altClass option get added to every odd row (zero based) and the classnames in the hoverClass get added/removed to/from a row when it is hovered over. The plugin also has a method that forces the table to re-apply classes and event handlers. This method is very useful for tables that get their content via ajax or javascript.

view plain print about
1$("#myTable").tableStyle("refresh");

I haven't tested this plugin on tables that don't use thead tbody and tfoot yet as i haven't had a need for that to work (all of my tables have proper thead tbody and tfoot) Since this was built as a jQuery UI plugin, it is easy to create extensions for it or to build new widgets that extend this widget to add built-in functionality such as sorting and/or paging; I'll follow up on this later with an extension that adds simple client-side sorting to this widget. GitHub Repository: https://github.com/tentonaxe/jQuery-Tablestyle

This entry was posted on September 11, 2011 at 3:49 PM and has received 2094 views. There are currently 0 comments. Print this entry.