jQuery Footable

  1. Tables
  2. jQuery Footable
FOOTABLE
College Pell
(2012-2014)		 Pell
(2008)		 Pell
change		 Net price, low- to
middle-income		 College Access
Index		 Endowment
per student
Vassar 23 12 +11 $5,600 3.1 $340,000
Grinnell 24 14 +10 $10,400 2.7 $880,000
U.N.C.-Chapel Hill 21 13 +8 $7,600 2.3 n/a
Amherst 20 16 +4 $8,400 2.0 $940,000
Harvard 17 13 +4 $3,000 2.0 $1,520,000
Pomona 18 12 +6 $5,200 1.8 $1,170,000
St. Mary's (Ind.) 24 14 +10 $15,900 1.8 $80,000
Smith 23 16 +7 $11,600 2.2 $440,000
Susquehanna 25 17 +8 $18,000 1.7 $50,000
Columbia 16 12 +4 $3,500 1.6 $320,000
Rice 18 15 +3 $8,100 1.5 $810,000
Kalamazoo 21 13 +8 $13,900 1.5 $190,000
Wesleyan 18 12 +6 $8,700 1.5 $200,000
Denison 20 11 +9 $11,800 1.5 $330,000
Brown 17 12 +5 $7,000 1.4 $350,000
Williams 18 14 +4 $9,300 1.4 $840,000
Barnard 19 15 +4 $11,100 1.4 $90,000
Stanford 15 12 +3 $4,300 1.4 $1,200,000
Wheaton (Ill.) 21 13 +8 $14,400 1.2 $110,000
Wellesley 18 13 +5 $10,600 1.2 $640,000
Show Code 
<!-- HTML FOOTABLE -->
<table class="fooTableInit"><!-- add .fooMinimal for minimal skin and remove foo css theme (footable.standalone.css) -->
	<thead>
	  <tr>
		<th class="foo-cell">College</th>
		<th data-type="numeric" data-hide = "s300" class="">Pell<br> (2012-2014)</th>
		<th data-type="numeric" data-hide = "s300,s600" class="">Pell<br> (2008)</th>
		<th data-type="numeric" data-hide = "s300,s600" class="">Pell<br> change</th>
		<th data-type="numeric" data-hide = "s300" class="">Net price, low- to<br> middle-income</th>
		<th data-type="numeric" data-sort-initial="descending" class="">College Access<br> Index</th>
		<th data-type="numeric" data-hide = "s300,s600" class="">Endowment<br> per student</th>
	  </tr>
	</thead>

	<tbody>

		<tr>
			<td class="foo-cell"> Vassar </td>
			<td> 23 </td>
			<td> 12 </td>
			<td data-value="11"> +11 </td>
			<td> $5,600 </td>
			<td class="highlight"> 3.1 </td>
			<td> $340,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Grinnell </td>
			<td> 24 </td>
			<td> 14 </td>
			<td data-value = '10'> +10 </td>
			<td> $10,400 </td>
			<td class="highlight"> 2.7 </td>
			<td> $880,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> U.N.C.-Chapel Hill </td>
			<td> 21 </td>
			<td> 13 </td>
			<td data-value = '8'> +8 </td>
			<td> $7,600 </td>
			<td class="highlight"> 2.3 </td>
			<td> n/a </td>
		</tr>

		<tr>
			<td class="foo-cell"> Amherst </td>
			<td> 20 </td>
			<td> 16 </td>
			<td data-value = '4'> +4 </td>
			<td> $8,400 </td>
			<td class="highlight"> 2.0 </td>
			<td> $940,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Harvard </td>
			<td> 17 </td>
			<td> 13 </td>
			<td data-value = '4'> +4 </td>
			<td> $3,000 </td>
			<td class="highlight"> 2.0 </td>
			<td> $1,520,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Pomona </td>
			<td> 18 </td>
			<td> 12 </td>
			<td data-value = '6'> +6 </td>
			<td> $5,200 </td>
			<td class="highlight"> 1.8 </td>
			<td> $1,170,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> St. Mary's (Ind.) </td>
			<td> 24 </td>
			<td> 14 </td>
			<td data-value = '10'> +10 </td>
			<td> $15,900 </td>
			<td class="highlight"> 1.8 </td>
			<td> $80,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Smith </td>
			<td> 23 </td>
			<td> 16 </td>
			<td data-value = '7'> +7 </td>
			<td> $11,600 </td>
			<td class="highlight"> 2.2 </td>
			<td> $440,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Susquehanna </td>
			<td> 25 </td>
			<td> 17 </td>
			<td data-value = '8'> +8 </td>
			<td> $18,000 </td>
			<td class="highlight"> 1.7 </td>
			<td> $50,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Columbia </td>
			<td> 16 </td>
			<td> 12 </td>
			<td data-value = '4'> +4 </td>
			<td> $3,500 </td>
			<td class="highlight"> 1.6 </td>
			<td> $320,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Rice </td>
			<td> 18 </td>
			<td> 15 </td>
			<td data-value = '3'> +3 </td>
			<td> $8,100 </td>
			<td class="highlight"> 1.5 </td>
			<td> $810,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Kalamazoo </td>
			<td> 21 </td>
			<td> 13 </td>
			<td data-value = '8'> +8 </td>
			<td> $13,900 </td>
			<td class="highlight"> 1.5 </td>
			<td> $190,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Wesleyan </td>
			<td> 18 </td>
			<td> 12 </td>
			<td data-value = '6'> +6 </td>
			<td> $8,700 </td>
			<td class="highlight"> 1.5 </td>
			<td> $200,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Denison </td>
			<td> 20 </td>
			<td> 11 </td>
			<td data-value = '9'> +9 </td>
			<td> $11,800 </td>
			<td class="highlight"> 1.5 </td>
			<td> $330,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Brown </td>
			<td> 17 </td>
			<td> 12 </td>
			<td data-value = '5'> +5 </td>
			<td> $7,000 </td>
			<td class="highlight"> 1.4 </td>
			<td> $350,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Williams </td>
			<td> 18 </td>
			<td> 14 </td>
			<td data-value = '4'> +4 </td>
			<td> $9,300 </td>
			<td class="highlight"> 1.4 </td>
			<td> $840,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Barnard </td>
			<td> 19 </td>
			<td> 15 </td>
			<td data-value = '4'> +4 </td>
			<td> $11,100 </td>
			<td class="highlight"> 1.4 </td>
			<td> $90,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Stanford </td>
			<td> 15 </td>
			<td> 12 </td>
			<td data-value = '3'> +3 </td>
			<td> $4,300 </td>
			<td class="highlight"> 1.4 </td>
			<td> $1,200,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Wheaton (Ill.) </td>
			<td> 21 </td>
			<td> 13 </td>
			<td data-value = '8'> +8 </td>
			<td> $14,400 </td>
			<td class="highlight"> 1.2 </td>
			<td> $110,000 </td>
		</tr>

		<tr>
			<td class="foo-cell"> Wellesley </td>
			<td> 18 </td>
			<td> 13 </td>
			<td data-value = '5'> +5 </td>
			<td> $10,600 </td>
			<td class="highlight"> 1.2 </td>
			<td> $640,000 </td>
		</tr>

	</tbody>

</table>

<div class="margin-top20 pagination text-center"><!-- PAGINATION --></div>




<!-- CSS FOOTABLE -->
<link href="assets/plugins/footable/css/footable.core.min.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/footable/css/footable.standalone.css" rel="stylesheet" type="text/css" />
<!--
	Minimal footable skin 
	1. remove footable.standalone.css skin first
	2. add .fooMinimal to the footable table
	<link href="assets/css/layout-footable-minimal.css" rel="stylesheet" type="text/css" /> 
-->




<!-- JS FOOTABLE -->
<script type="text/javascript">
loadScript(plugin_path + "footable/dist/footable.min.js", function(){
	loadScript(plugin_path + "footable/dist/footable.sort.min.js", function(){
		loadScript(plugin_path + "footable/dist/footable.paginate.min.js", function(){ /** remove if pagination not needed **/

			var $ftable = jQuery('.fooTableInit');


			/** 01. FOOTABLE INIT
			******************************************* **/
			$ftable.footable({
				breakpoints: {
					s300: 300,
					s600: 600
				}
			});


			/** 01. PER PAGE SWITCH
			******************************************* **/
			jQuery('#change-page-size').change(function (e) {
				e.preventDefault();
				var pageSize = jQuery(this).val();
				$ftable.data('page-size', pageSize);
				$ftable.trigger('footable_initialized');
			});

			jQuery('#change-nav-size').change(function (e) {
				e.preventDefault();
				var navSize = jQuery(this).val();
				$ftable.data('limit-navigation', navSize);
				$ftable.trigger('footable_initialized');
			});


			/** 02. BOOTSTRAP 3.x PAGINATION FIX
			******************************************* **/
			jQuery("div.pagination").each(function() {
				jQuery("div.pagination ul").addClass('pagination');
				jQuery("div.pagination").removeClass('pagination');
			});

		});
	});
});
</script">