CODEWITHSUNDEEP
asp.net-mvc-4tablesorter
Prasanna
Prasanna

Reputation: 327

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

Upvotes: 1

Views: 623

Answers (1)

Mottie
Mottie

Reputation: 86433

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.

Upvotes: 1

Related Questions