Footable Table
Footable Example
| 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 |
Usage
You have to go through the code of this page to see the table example but please keep in mind that you need to include few CSS and JAVASCRIPTS:
<!-- PAGE LEVEL STYLE -->
<link href="assets/plugins/jquery-footable/css/footable.core.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/jquery-footable/css/footable.standalone.css" rel="stylesheet" type="text/css" />
<!-- PAGE LEVEL SCRIPTS -->
<script type="text/javascript" src="assets/plugins/jquery-footable/dist/footable.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-footable/dist/footable.sort.min.js"></script>
<!-- remove if pagination not needed -->
<script type="text/javascript" src="assets/plugins/jquery-footable/dist/footable.paginate.min.js"></script>
<!-- TABLE INIT -->
<script type="text/javascript">
jQuery(document).ready(function() {
// footable
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>
Awesome fully responsive table.