Footable plugin

Footable with single header

ID First Name Last Name Job Title Started On Date of Birth
1 Dennise Fuhrman High School History Teacher November 8th 2011 July 25th 1960
2 Elodia Weisz Wallpaperer Helper October 15th 2010 March 30th 1982
3 Raeann Haner Internal Medicine Nurse Practitioner November 28th 2013 February 26th 1966
4 Junie Landa Offbearer October 31st 2010 March 29th 1966
5 Solomon Bittinger Roller Skater December 29th 2011 September 22nd 1964
6 Bar Lewis Clown November 12th 2012 August 4th 1991
7 Usha Leak Ships Electronic Warfare Officer August 14th 2012 November 20th 1979
8 Lorriane Cooke Technical Services Librarian September 21st 2010 April 7th 1969
Show Code 

-- required js/ css
<link href="asset/plugin/footable-bootstrap/css/footable.bootstrap.min.css">
<script src="asset/plugin/footable-bootstrap/js/footable.min.js"></script>

-- html
<table id="footable1" class="table  table-striped">
<thead class="thead-primary">
	<tr>
		<th data-breakpoints="xs">ID</th>
		<th>First Name</th>
		<th>Last Name</th>
		<th data-breakpoints="xs">Job Title</th>
		<th data-breakpoints="xs sm">Started On</th>
		<th data-breakpoints="xs sm md" data-title="DOB">Date of Birth</th>
	</tr>
</thead>
<tbody>
	<tr data-expanded="true">
		<td>1</td>
		<td>Dennise</td>
		<td>Fuhrman</td>
		<td>High School History Teacher</td>
		<td>November 8th 2011</td>
		<td>July 25th 1960</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Elodia</td>
		<td>Weisz</td>
		<td>Wallpaperer Helper</td>
		<td>October 15th 2010</td>
		<td>March 30th 1982</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Raeann</td>
		<td>Haner</td>
		<td>Internal Medicine Nurse Practitioner</td>
		<td>November 28th 2013</td>
		<td>February 26th 1966</td>
	</tr>                                           
	<tr>
		<td>8</td>
		<td>Lorriane</td>
		<td>Cooke</td>
		<td>Technical Services Librarian</td>
		<td>September 21st 2010</td>
		<td>April 7th 1969</td>
	</tr>
</tbody>
</table>

-- JS code 
<script>

$(document).ready(function () {

	 $('#footable1').footable();
});

</script>

Footable with row toggle ( by setting data-show-toggle='false' )

ID First Name Last Name Job Title Started On Date of Birth
1 Dennise Fuhrman High School History Teacher November 8th 2011 July 25th 1960
2 Elodia Weisz Wallpaperer Helper October 15th 2010 March 30th 1982
3 Raeann Haner Internal Medicine Nurse Practitioner November 28th 2013 February 26th 1966
4 Junie Landa Offbearer October 31st 2010 March 29th 1966
5 Solomon Bittinger Roller Skater December 29th 2011 September 22nd 1964
6 Bar Lewis Clown November 12th 2012 August 4th 1991
7 Usha Leak Ships Electronic Warfare Officer August 14th 2012 November 20th 1979
8 Lorriane Cooke Technical Services Librarian September 21st 2010 April 7th 1969
Show Code 

-- required js/ css
<link href="asset/plugin/footable-bootstrap/css/footable.bootstrap.min.css">
<script src="asset/plugin/footable-bootstrap/js/footable.min.js"></script>

-- html
<table id="footable2" class="table" data-show-toggle="false">
<thead class="thead-primary">
	<tr>
		<th data-breakpoints="xs">ID</th>
		<th>First Name</th>
		<th>Last Name</th>
		<th data-breakpoints="xs">Job Title</th>
		<th data-breakpoints="xs sm">Started On</th>
		<th data-breakpoints="all" data-title="DOB">Date of Birth</th>
	</tr>
</thead>
<tbody>
	<tr data-expanded="true">
		<td>1</td>
		<td>Dennise</td>
		<td>Fuhrman</td>
		<td>High School History Teacher</td>
		<td>November 8th 2011</td>
		<td>July 25th 1960</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Elodia</td>
		<td>Weisz</td>
		<td>Wallpaperer Helper</td>
		<td>October 15th 2010</td>
		<td>March 30th 1982</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Raeann</td>
		<td>Haner</td>
		<td>Internal Medicine Nurse Practitioner</td>
		<td>November 28th 2013</td>
		<td>February 26th 1966</td>
	</tr>                                           
</tbody>
</table>

-- JS code 
<script>

$(document).ready(function () {

	 $('#footable2').footable();
});

</script>