Easy jQuery Table Sorter Plugin - Andras Sortable Table
File Size: | 40.6KB |
---|---|
Views Total: | 1738 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Andras Sortable Table is a simple jQuery plugin that turns the standard html table into a sortable table that allows visitors to click the header to sort each column of your table. It also can be used for table pagination that you can control the number of rows shown per page.
How to use it:
1. Include jQuery library and jQuery andrashuebnertableplugin in the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/andrashuebnertableplugin.1.0.0.js"></script>
2. Create a html table
<table border="1" id="demo"> <thead> <tr> <th><h2> <h3>First name</h3> </h2></th> <th>Last name</th> <th>Age</th> <th>Height (in cm)</th> </tr> </thead> <tbody> <tr> <td>Peter</td> <td>Panzer</td> <td>38</td> <td>177</td> </tr> <tr> <td>Marianne</td> <td>Albrecht</td> <td>32</td> <td>68</td> </tr> <tr> <td>Werner</td> <td>Bergmann</td> <td>39</td> <td>165</td> </tr> <tr> <td>Susanne</td> <td>Albrecht</td> <td>31</td> <td>165</td> </tr> ... </tbody> </table>
3. Call the plugin with options
<script> $(document).ready(function(){ $("#demo").andrashuebnertableplugin({ page_size: 8, //optional. number of rows shown per page, default is 5 class_pages_selection: "table_pages_selection", //css class to style the page selection of the table callback_function_initial: function(message) {console.log("Table created")}, //callback function to call when sortable table is created callback_function_after_sort: function(message) {console.log("Table sorted")} //callback function to call when sortable table is sorted }); }); </script>
This awesome jQuery plugin is developed by andreashuebner. For more Advanced Usages, please check the demo page or visit the official website.