Skip to content

Latest commit

 

History

History
248 lines (238 loc) · 4.96 KB

README.md

File metadata and controls

248 lines (238 loc) · 4.96 KB

jQuery Sortable Table Plugin

Allows the user to sort the rows of an HTML <table> based on the text inside the cell corresponding to the column header that is clicked.

Cross-platform Compatibility

  • Firefox 3+
  • Webkit (Google Chrome, Apple's Safari)
  • Internet Explorer 7+
  • Opera

Requirements

  • jQuery 1.7.0+
  • underscore.js

Feature Overview

  • Can handle up to 3 levels of nested data
  • Supports sorting by numeric and string values
  • Can exclude sets of rows from the set of sortable rows

Usage

Create a regular <table> widget in HTML. Override any CSS styles needed for your theme. If your table is showing grouped data, each group level requires a data-level attribute on the <tr> row. The data-level attribute must be an integer between 1 and 3 (inclusive). This will assume that your table, by default, is showing your grouped data in the correct order.

Requires that your header row uses <th> tags rather than <td> tags.

Simply call .sortableTable() on your jQuery extended <table> element, and you'll be able to sort on each column by clicking on the <th> header cell for a given column.

####Required options:

  • image_base location of directory where images are located

You can re-initialize the table's sort, say because the table was updated with new rows, by calling .sortableTable() on your jQuery extended <table> element with the method name 'reinit' as the first argument, rather than a set of options. Example

<table id="grouping_example_table">
	<tr>
		<th>State Name</th>
		<th data-sort-type="numeric">Number of Respondents</th>
	</tr>
	<tr data-level="1">
		<td colspan="2"><b>Division:</b> New England</td>
	</tr>
	<tr data-level="2">
		<td>Connecticut</td>
		<td>4</td>
	</tr>
	<tr data-level="3">
		<td>06010</td>
		<td>1</td>
	</tr>
	<tr data-level="3">
		<td>06790</td>
		<td>2</td>
	</tr>
	<tr data-level="3">
		<td>06512</td>
		<td>1</td>
	</tr>
	<tr data-level="2">
		<td>Massachusetts</td>
		<td>4</td>
	</tr>
	<tr data-level="3">
		<td>02130</td>
		<td>1</td>
	</tr>
	<tr data-level="3">
		<td>01002</td>
		<td>1</td>
	</tr>
	<tr data-level="3">
		<td>02721</td>
		<td>1</td>
	</tr>
	<tr data-level="3">
		<td>01830</td>
		<td>1</td>
	</tr>
	<tr data-level="2">
		<td>Maine</td>
		<td>3</td>
	</tr>
	<tr data-level="3">
		<td>04240</td>
		<td>1</td>
	</tr>
	<tr data-level="3">
		<td>04401</td>
		<td>2</td>
	</tr>
	<tr data-level="2">
		<td>New Hampshire</td>
		<td>0</td>
	</tr>
	<tr data-level="2">
		<td>Rhode Island</td>
		<td>1</td>
	</tr>
	<tr data-level="3">
		<td>02910</td>
		<td>1</td>
	</tr>
	<tr data-level="2">
		<td>Vermont</td>
		<td>0</td>
	</tr>
	<tr data-level="1">
		<td colspan="2"><b>Division:</b> Middle Atlantic</td>
	</tr>
	<tr data-level="2">
		<td>New Jersey</td>
		<td>150</td>
	</tr>
	<tr data-level="3">
		<td>08062</td>
		<td>50</td>
	</tr>
	<tr data-level="3">
		<td>07481</td>
		<td>25</td>
	</tr>
	<tr data-level="3">
		<td>08534</td>
		<td>30</td>
	</tr>
	<tr data-level="3">
		<td>07013</td>
		<td>45</td>
	</tr>
	<tr data-level="2">
		<td>New York</td>
		<td>165</td>
	</tr>
	<tr data-level="3">
		<td>10701</td>
		<td>20</td>
	</tr>
	<tr data-level="3">
		<td>11530</td>
		<td>20</td>
	</tr>
	<tr data-level="3">
		<td>10005</td>
		<td>15</td>
	</tr>
	<tr data-level="3">
		<td>10606</td>
		<td>30</td>
	</tr>
	<tr data-level="3">
		<td>10021</td>
		<td>75</td>
	</tr>
	<tr data-level="3">
		<td>14420</td>
		<td>5</td>
	</tr>
	<tr data-level="2">
		<td>Pennsylvania</td>
		<td>420</td>
	</tr>
	<tr data-level="3">
		<td>15012</td>
		<td>105</td>
	</tr>
	<tr data-level="3">
		<td>16504</td>
		<td>100</td>
	</tr>
	<tr data-level="3">
		<td>17109</td>
		<td>120</td>
	</tr>
	<tr data-level="3">
		<td>19010</td>
		<td>95</td>
	</tr>
	<tr data-level="1" id="west_south_central">
		<td colspan="2"><b>Division:</b> West South Central</td>
	</tr>
	<tr data-level="2">
		<td>Arkansas</td>
		<td>0</td>
	</tr>
	<tr data-level="2">
		<td>Louisiana</td>
		<td>3</td>
	</tr>
	<tr data-level="3">
		<td>70123</td>
		<td>1</td>
	</tr>
	<tr data-level="3">
		<td>70131</td>
		<td>1</td>
	</tr>
	<tr data-level="3">
		<td>70817</td>
		<td>1</td>
	</tr>
	<tr data-level="2">
		<td>Oklahoma</td>
		<td>6</td>
	</tr>
	<tr data-level="3">
		<td>74820</td>
		<td>1</td>
	</tr>
	<tr data-level="3">
		<td>73505</td>
		<td>5</td>
	</tr>
	<tr data-level="2">
		<td>Texas</td>
		<td>570</td>
	</tr>
	<tr data-level="3">
		<td>75063</td>
		<td>100</td>
	</tr>
	<tr data-level="3">
		<td>76180</td>
		<td>50</td>
	</tr>
	<tr data-level="3">
		<td>75057</td>
		<td>420</td>
	</tr>
</table>

<script type='text/javascript'>
	$(document).ready(function() {
		$('table#grouping_example_table').sortableTable({image_base:'img/default',
														 rows_to_anchor:'#west_south_central'});
	});
</script>