Easy jQuery Table Sorter Plugin - Andras Sortable Table

Easy jQuery Table Sorter Plugin - Andras Sortable Table
File Size: 40.6KB
Views Total:
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.