Footable pagination and sorting is not working - html

Question

First i setup jquery, bootstrap libs and then include footable.min.js, footable.paging.js and footable.sorting.min.js files and also setup stylesheets for that.
So, i can't to use sorting as well as pagination on it.
i am not getting any kind of error in console. whereas i able to used data-breakpoints for various devices and it works for me. i don't know how one features is working and another is not. please help me.
html file
<div class="container-fluid">
<div class="page-header">
<table class="footable table table-hover" data-page-size="3" data-page-navigation=".pagination">
<thead>
<tr>
<th data-toggle="true">Name</th>
<th data-breakpoints="xs sm">Birthday</th>
<th data-breakpoints="xs">City</th>
<th>Donation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sade Morgan</td>
<td>10/03/1990</td>
<td>Ede</td>
<td>$4,653</td>
</tr>
<tr>
<td>Knox Sutton</td>
<td>06/29/1966</td>
<td>Bressoux</td>
<td>$4,563</td>
</tr>
<tr>
<td>Rooney Preston</td>
<td>12/12/2002</td>
<td>Patalillo</td>
<td>$3,222</td>
</tr>
<tr>
<td>Fulton Wilkerson</td>
<td>01/24/1986</td>
<td>Haren</td>
<td>$2,841</td>
</tr>
<tr>
<td>Azalia Long</td>
<td>11/21/1988</td>
<td>Gressoney-Saint-Jean</td>
<td>$4,631</td>
</tr>
<tr>
<td>Erich Burris</td>
<td>10/26/1966</td>
<td>Pulle</td>
<td>$2,519</td>
</tr>
<tr>
<td>Kadeem Sharpe</td>
<td>08/24/1976</td>
<td>Ekeren</td>
<td>$1,440</td>
</tr>
<tr>
<td>Rose Wilcox</td>
<td>11/05/2003</td>
<td>Aparecida de Goiânia</td>
<td>$2,188</td>
</tr>
<tr>
<td>Hu Gibson</td>
<td>02/18/1994</td>
<td>Raigarh</td>
<td>$4,286</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<ul class="pagination"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$(".footable").footable();
});
</script>