Search code examples
htmlfootable

How to add sort option in Footable?


I have included necessary files required for Footable sorting , but columns dont have an option to sort the column values , any help would be of great help .

Code :

<!DOCTYPE html>
<html>
    <head>
        <title> Sorting Html Table Using FooTable </title>
        <link rel="stylesheet" href="css/footable.core.css"> 
        <link rel="stylesheet" href="css/footable.metro.css">

        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/footable.js"></script>
        <script src="js/footable.sort.js"></script>

    </head>

    <body>

        <table class="footable"  >

 <thead >
            <!-- data-type = data type in the column -->
            <!-- data-sort-ignore = disable sorting for the column -->
            <!-- data-sort-initial = sort the column when the FooTable is initialized -->
  <tr>
   <th >Name</th>
   <th ">Mark1</th>
   <th  ">Mark2</th>
   <th " >Total</th>
  </tr>

 </thead >

        <tbody >

            <!-- populate table from mysql database -->
            <?php while($row1 = mysqli_fetch_array($result)):;?>
            <tr>
                <td><?php echo $row1[0];?></td>
                <td><?php echo $row1[1];?></td>
                <td><?php echo $row1[2];?></td>
                <td><?php echo $row1[3];?></td>
            </tr>
            <?php endwhile;?> 

        </tbody>

        </table>      
    </body>
    <script type="text/javascript">
    $(document).ready(function(){
        $('.footable').footable();
    });
    </script>
</html>

Solution

  • Added the following bootstrap and jquery links to html file which solved my issue on sorting , now i can sort them :

    <link data-require="[email protected]" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
      <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
      <link rel="stylesheet" href="footable.core.css" />
      <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
      <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
      <script data-require="bootstrap@*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>