使用jQuery UI 实现表格排序 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格排序</title>
    <link rel="stylesheet" href="jquery-ui-1.12.0/jquery-ui.css">
</head>

<body>
<table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Email</th>
        <th>Due</th>
        <th>Web Site</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>jsmith@gmail.com</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>fbach@yahoo.com</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>jdoe@hotmail.com</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>tconway@earthlink.net</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
    </tr>
    </tbody>
</table>

</body>
<script src="jquery-1.12.4.min.js"></script>
<script src="jquery-ui-1.12.0/jquery.tablesorter.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#myTable").tablesorter();
    });

</script>
</html>

posted @ 2016-10-06 15:51  liwei742314100  阅读(446)  评论(0)  编辑  收藏  举报