Need help in implementing tablesorter 2.17.1(or latest)

can anybody please help me get a working sample of MVC application with tablesorter plugin applied ? I am a bit confused about how to apply latest tablesorter plugin to my MVC sample..I am trying to implement something like

$('table').trigger('sortReset')

in the below teble.

<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric Sort</th>
            <th>Currency</th>
            <th>Alphabetical</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>abc 123</td><td>&#163;10,40</td><td>Koala</td><td>http://www.google.com</td></tr>
        <tr><td>abc 1</td><td>&#163;234,10</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
        <tr><td>abc 9</td><td>&#163;10,33</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
        <tr><td>zyx 24</td><td>&#163;10</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
        <tr><td>abc 11</td><td>&#163;3,20</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
        <tr><td>abc 2</td><td>&#163;56,10</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
        <tr><td>abc 9</td><td>&#163;3,20</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
        <tr><td>ABC 10</td><td>&#163;87,00</td><td>Zebra</td><td>http://www.google.com</td></tr>
        <tr><td>zyx 1</td><td>&#163;99,90</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
        <tr><td>zyx 12</td><td>&#163;234,10</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
    </tbody>
</table>

Also the js and css files I am referring are as follows

<head>
<meta charset="utf-8">
<title>Basic Tablesorter Demo</title>


<link href="~/Content/jq.css" rel="stylesheet" />

<link href="~/Content/theme.default.css" rel="stylesheet" />

<script src="~/Scripts/jquery-latest.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script src="~/Scripts/jquery.tablesorter.min.js"></script>
<script src="~/Scripts/jquery.tablesorter.widgets.min.js"></script>

<script>
    $(function () {
        $('.tablesorter').tablesorter({
            widgets: ['zebra', 'columns'],
            usNumberFormat: false,
            sortReset: true,
            sortRestart: true
        });
    });

</script>

Not sure why I am not getting this working..It thorows an error like "Uncaught TypeError: undefined is not a function " for tablesorter()

Note: I learned that this functionality of resetting is available with plugin 2.4.7 onward.

Your help is greatly appreciated.

Thanks

Solution

You'll need to add an element on the page that allows the user to click to reset the sort. In this example, I'll use a button:

<button type="button" class="reset">Reset Sort</button>

then apply the appropriate script to give that button the ability to trigger the reset event:

$(function () {
    $('.tablesorter').tablesorter({
        widgets: ['zebra', 'columns'],
        usNumberFormat: false,
        sortReset: true,
        sortRestart: true
    });

    // make button reset the sort
    $('.reset').click(function(){
        $('.tablesorter').trigger('sortReset');
    });

});

Alternatively, the user can use Ctrl + Left Click on any header cell to reset the sort. The key can be changed using the sortResetKey option.