jQuery Plugin for Scrollable Tables - scrolltable

File Size: 11.5KB
Views Total: 33064
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin for Scrollable Tables - scrolltable

scrolltable is a simple jQuery and jQuery UI based plugin that easily turns the standard html tables into scrollable tables.

How to use it:

1. Include jQuery library, jQuery UI and jQuery scrolltable plugin on the page

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.scrolltable.js"></script>

2. Markup Html Structure

<table class="scrollTable" cellpadding="0" cellspacing="0">

<thead>
<tr> 
<th width="10%" style="width:10%">Col 1</th>
<th>Col 2</th>
<th style="width:80px">Col 3</th>
<th width="40%">Col 4</th>
</tr>
</thead>

<tbody>
<tr>
<td>Row 1</td>
<td>Row 1 cell with some content</td>
<td>Row 1</td>
<td>Row 1 cell with more content inside of it</td>
</tr>

<tr>
<td>Row 2</td>
<td>Row 2 cell with some content</td>
<td>Row 2</td>
<td>Row 2 cell with more content inside of it</td>
</tr>

<tr>
<td>Row 3</td>
<td>Row 3 cell with some content</td>
<td>Row 3</td>
<td>Row 3 cell with more content inside of it</td>
</tr>

...

</tbody>
</table>

3. Call the plugin with options

<script type="text/javascript">
$(function(){

$('.scrollTable').scrolltable({
stripe: true,
oddClass: 'odd',
setWidths: true,
maxHeight: 300
});

});
</script>

This awesome jQuery plugin is developed by th3uiguy. For more Advanced Usages, please check the demo page or visit the official website.