Question

我已经包含了Footable排序所需的必要文件，但是列没有选项来对列值进行排序，任何帮助都会有很大的帮助。

代码：

<!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>

Answer 1

添加了以下bootstrap和jquery链接到html文件，这解决了我的排序问题，现在我可以对它们进行排序：

<link data-require="bootstrap-css@3.0.2" 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>

如何在Footable中添加排序选项？

1 个答案: