This time I will share jQuery Plugin and tutorial about Freeze Multiple Headers And Columns In Table – jQuery MultiFreezer, hope it will help you in programming stack.
MultiFreezer is an easy-to-use jQuery sticky table plugin which keeps multiple header rows and table columns while scrolling through the html table.
How to use it:
1. Include the jQuery MultiFreezer plugin’s stylesheet multifreezer.css and JavaScript file multifreezer.js on the web page.
1 |
<link href="/path/to/multifreezer.css" rel="stylesheet"> |
2 |
<script src="/path/to/jquery.min.js"></script> |
3 |
<script src="/path/to/multifreezer.js"></script> |
2. Initialize the plugin using HTML data attributes:
- data-scroll-height: scroller height, if null, common wrapper height() will be used
- data-cols-number: number of columns to freeze, if null, will be autodetected from <TH>
01 |
<table class="table-freeze-multi" |
02 |
data-scroll-height="300" |
18 |
<td>john@example.com</td> |
23 |
<td>mary@example.com</td> |
28 |
<td>july@example.com</td> |
This awesome jQuery plugin is developed by janrenn. For more Advanced Usages, please check the demo page or visit the official website.
