Pagination not working with footable

Question

hello friends i am trying to use footable in my project i got code from some site but pagination is not working with this code. I have created static demo page with following code and i have more than 100 rows in table i haven't mentioned in code and i am getting below output.can anyone help me.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/footable.core.min.css">
<link rel="stylesheet" type="text/css" href="css/footable.metro.css" />
<link rel="stylesheet" type="text/css" href="css/footable.paging.css"/>     

<table id="example"  class="footable" data-filter="#filter" data-page-size="5">
     <thead>
          <tr>
           <th data-hide="phone">Languages</th>
           <th data-hide="phone">Population</th>
           <th data-hide="phone">Median Age</th>
           <th data-hide="phone">Area (Km²)</th>
          </tr>
          </thead>
             <tbody>
              <tr>
                <td>Australia</td>
                 <td>English 79%, native and other languages</td>
                 <td>23,630,169</td>
                 <td>37.3</td>
                 <td>7,739,983</td>
                </tr>
               </tbody>
              </table>

<script type="text/javascript" src="js/footable.js"></script>       
<script type="text/javascript" src="js/footable.paging.js"></script>
<script type="text/javascript" src="js/footable.paging.min.js"></script>
       <script>
        $(document).ready(function() { $(function () {
                            $('.footable').footable(); }); } ); </script>