jQuery Sortable and Moveable Table Plugin - Table Sort
File Size: | 5.08 KB |
---|---|
Views Total: | 10602 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Table Sort is a tiny and easy-to-use jQuery table sort plugin that enables you to sort table columns by clicking the header. It also comes with a move
function which allows you to move up/down table rows by clicking the up/down arrows.
How to use it:
1. Create a standard Html table. Using data-type
attribute to define the data type for sorting.
2. Load the latest version of jQuery library and jQuery Table Sort at the bottom of your page.
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.table_sort.min.js"></script>
3. Call the plugin.
<script> <!-- $(function(){ // Sortable $(".sort").tableSort(); // Movable $(".sort").tableMove(); }); //--> </script>
4. Advance usage.
<script> $(function(){ // Sortable $(".sort").tableSort({ indexes: [0, 1, 3], // Target columns. Default is all. compare: function(a, b){ // If you want to custom sort. a = a.replace("%", "") * 1; b = b.replace("%", "") * 1; return a - b; }, after: function(th){ // The process to hook into sort after execution. console.log($(th).text() + " sorted!"); // If use when combined with tableMove. // $(".sort").tableMove(); }, }); // Movable $(".sort").tableMove({ after: function(tr){ // The process to hook into move after execution. console.log($(tr).find("td").eq(1).text() + " moved!"); }, }); }); </script>
Change log:
2016-02-18
- update.
This awesome jQuery plugin is developed by i2bskn. For more Advanced Usages, please check the demo page or visit the official website.