简体   繁体   中英

using html table and jquery with tablesorter

First of I am not HTML guy so apologies if this is very simple. I purchased shared hosting last night and want to display html table on my webpage. I also want to have the feature of sorting the html table. I did some googling and found tablesorter is good way to go. I put my code here it is

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="C:\Users\xx\Desktop\pages\jquery.tablesorter.js"></script> 
<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> 
$(document).ready(function() 
    { 
        $("#myTable").tablesorter(); 
    } 
); 


$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
); 

But the output it produces is

在此处输入图片说明

WHAT am i doing wrong here

This is corrected html for tablesorter :

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.1/js/jquery.tablesorter.js"></script> 
<script>
    $(document).ready(function () {
        $("table").tablesorter();
        $("#trigger-link").click(function () {
            var sorting = [[0, 0], [2, 0]];
            $("table").trigger("sorton", [sorting]);
            return false;
        });
    });
</script>
<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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM