Jquery Table Sorter无法正常工作,表头没有响应

时间:2015-07-18 11:35:41

标签: javascript jquery tablesorter

这是我的单个html页面,我不知道我在哪里做错了,我也包含了jquery和tablesorer文件,但仍然无法正常工作

    

    <meta name="description" content="">

    <!-- Mobile viewport optimized -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- Bootstrap CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="includes/css/styles.css" rel="stylesheet">

    <!-- Include Modernizr in the head, before any other Javascript -->
    <script src="includes/js/modernizr-2.6.2.min.js"></script>

    <!-- All Javascript at the bottom of the page for faster page loading -->

<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>

<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>

以下代码无效 这是屏幕截图https://imgur.com/xH3QZbB

    <script type="text/javascript" src="jquery-latest"></script>
    <script type="text/javascript" src="jquery.tablesorter"></script>



    <script>
$(document).ready(function()
        {
            $("#ax").tablesorter();
        }
);

</head>
<body>


<div class="container">


        <table class="table tablesorter table-striped" id="ax">
            <thead>
            <tr>
                <th>S.no</th>
                <th>Name</th>
                <th>City</th>
                <th>Countrt</th>

            </tr>

            </thead>
            <tbody>
            <tr>
                <td>Plan A</td>
                <td>300</td>
                <td>3 Months</td>
                <td>
                    <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#myModal11">Edit
                    </button>
                    <button type="button" class="btn btn-danger" onClick="myDel(this)" data-toggle="modal" data-target="#myModal_del">Delete
                    </button>
                </td>
            </tr>
            <tr>
                <td>Plan A</td>
                <td>300</td>
                <td>3 Months</td>
                <td>
                    <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#myModal11">Edit
                    </button>
                    <button type="button" class="btn btn-danger" onClick="myDel(this)" data-toggle="modal" data-target="#myModal_del">Delete
                    </button>
                </td>
            </tr>
            <tr>
                <td>Plan B</td>
                <td>100</td>
                <td>3 Months</td>
                <td>
                    <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#myModal11">Edit
                    </button>
                    <button type="button" class="btn btn-danger" onClick="myDel(this)" data-toggle="modal" data-target="#myModal_del">Delete
                    </button>
                </td>
            </tr>
            <tr>
                <td>Plan D</td>
                <td>700</td>
                <td>3 Months</td>
                <td>
                    <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#myModal11">Edit
                    </button>
                    <button type="button" class="btn btn-danger" onClick="myDel(this)" data-toggle="modal" data-target="#myModal_del">Delete
                    </button>
                </td>
            </tr>
            <tr>
                <td>Plan C</td>
                <td>500</td>
                <td>3 Months</td>
                <td>
                    <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#myModal11">Edit
                    </button>
                    <button type="button" class="btn btn-danger" onClick="myDel(this)" data-toggle="modal" data-target="#myModal_del">Delete
                    </button>
                </td>
            </tr>
            <tr>
                <td>Plan F</td>
                <td>900</td>
                <td>3 Months</td>
                <td>
                    <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#myModal11">Edit
                    </button>
                    <button type="button" class="btn btn-danger" onClick="myDel(this)" data-toggle="modal" data-target="#myModal_del">Delete
                    </button>
                </td>
            </tr>
            </tbody>

        </table>
        <!--end Table-->




</div>



<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>

<!-- Custom JS -->
<script src="includes/js/script.js"></script>

</body>

1 个答案:

答案 0 :(得分:0)

https://datatables.net/examples/styling/bootstrap.html

使用jquery bootstrap datatable ..