Footable img sort

by Mateus Correia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://fooplugins.github.io/FooTable/compiled/footable.bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://fooplugins.github.io/FooTable/compiled/footable.js"></script>
<table class="table table-striped">
  <thead>
  <tr class="footable-header">
    <th data-type="html" data-sortable="true">Color</th>
    <th>Value</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><img src="http://www.fancyicons.com/free-icons/218/mixed/png/32/red_ball_32.png" /></td>
    <td>red</td>
  </tr>
  <tr>
    <td><img src="http://icons.iconarchive.com/icons/sekkyumu/developpers/32/Yellow-Ball-icon.png" /></td>
    <td>yellow</td>
  </tr>
  <tr>
    <td><img src="http://www.birds.cornell.edu/citscitoolkit/images/AquaBallGreen32x32.png" /></td>
    <td>green</td>
  </tr>
  </tbody>
</table>

JavaScript

jQuery(function($){
		$('.table').footable({
			"paging": {
				"enabled": true
			},
			"sorting": {
				"enabled": true
			}
		});
	});