Stick Table Element To Top/Bottom/Left/Right - jQuery sticky.js
File Size: | 267 KB |
---|---|
Views Total: | 4809 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple-to-use jQuery sticky table plugin that sticks any table elements (thead, tbody, tfoot, th, tr, td, etc) to the top, bottom, left and/or right in a large HTML table.
How to use it:
1. Add jQuery JavaScript library and the jQuery sticky.js plugin to the html page.
<link rel="stylesheet" href="stickytable.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="sticky.js"></script>
2. Initialize the plugin on the HTML table and we're ready to go.
$(function(){ $('table').sticky(); });
3. Specify the table elements to be sticky using the data-sticky-POSITION
attributes:
<table class="example" data-sticky-top="tr:first-child" data-sticky-left="tr td:first-child" data-sticky-bottom="tr:last-child" data-sticky-right="tr td:last-child" > ... </table>
4. You can also specify the table elements to be sticky during init as follows:
$(function(){ $('table').sticky({ top: "tr:first-child", left: "tr td:first-child", right: "tr:last-child", bottom: "tr td:last-child" }); });
5. Event handlers.
$('table').on('sticky-table-susses', function() { console.log("add-sticky-table-susses"); }); $('table').on('sticky-table-start', function() { console.log("add-sticky-table-start"); }); $('table').on('sticky-table-removed', function() { console.log("sticky-table-removed"); });
Changelog:
2019-04-12
- JS & CSS updated
2019-03-01
- rewritten
This awesome jQuery plugin is developed by lethevinh. For more Advanced Usages, please check the demo page or visit the official website.