jQuery tablesorter() is not working..!

Here is my HTML code after rendering on browser. I am trying to sort columns in a GridView by clicking on header. But this is not working for me. I have gone through many answers in Google. I tried both ways by adding/removing few settings inside tablesorter() keyword. None of them solved my problem. can any one here suggest me what might be rootcause. Please help me out.

<html>
<head><title>

</title><link href="themes/blue/style.css" rel="stylesheet" /><link     href="themes/green/style.css" rel="stylesheet" />
<script src="~/JQuery/jquery-1.9.0.min.js" type="text/javascript"></script>

<script src="~/JQuery/jquery.tablesorter.js" type="text/javascript"></script>
<script src="~/JQuery/TableSorter.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#GrdViewEmployee").tablesorter({ sortList: [[0, 0], [2, 1]], widgets:'zebra' });
    });
</script>
</head>
<body class="tablesorterBlue">
<form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="fauQ7GKDqTon5mt7NHJnOCzVzfTVHWHj+gG3j+CA8mTf4JJVPho0PBzFatn/hz/0xu7X0+jfUVQHlCgPQh5CNnoHCyzZOnTqgr7nSstUfCj5JlrZkhV7468h3Vx1e7Er" />
</div>

    <div>
<table cellspacing="0" rules="all" class="tablesorterBlue" border="1" id="GrdViewEmployee" style="border-collapse:collapse;">
    <thead>
        <tr>
            <th scope="col">empId</th><th scope="col">empName</th><th scope="col">empEMail</th><th scope="col">empPhone</th>
        </tr>
    </thead><tbody>
        <tr>
            <td>1</td><td>rameshwar</td><td>[email protected]</td><td>1234</td>
        </tr><tr>
            <td>2</td><td>shrivatsav</td><td>[email protected]</td><td>1234</td>
        </tr><tr>
            <td>3</td><td>ganga</td><td>[email protected]</td><td>54321</td>
        </tr><tr>
            <td>4</td><td>krishna</td><td>[email protected]</td><td>98766</td>
        </tr><tr>
            <td>5</td><td>mahesh</td><td>hfgsdhjf@jdfsgjd</td><td>347234</td>
        </tr><tr>
            <td>6</td><td>Shridhar</td><td>[email protected]</td><td>545454</td>
        </tr>
    </tbody><tfoot>

    </tfoot>
</table>
</div>
</form>
</body>
</html>

Solution

I used the code you have above, and it works for me in this demo

I did have to make two changes

Change the table class name to "tablesorter-blue"
```
<table class="tablesorter-blue" .... >
```
The widget option needs an array:
```
widgets: [ 'zebra' ]
```

So, if I had to guess, I would say that either jQuery or the plugin files are not loading correctly.

Maybe the issue is with one of the following:

<script src="~/JQuery/jquery.tablesorter.js" type="text/javascript"></script>
<script src="~/JQuery/TableSorter.js" type="text/javascript"></script>

The tilde (~), I believe it only works in asp.net server controls, so I'm not sure if it is the problem here.
The capitalization of the directory name; "JQuery" is usually typed as "jQuery" with a small-letter J
Or the name of the "TableSorter.js" file name. None of the plugin files are named in this manner, with a capital "T", so is this a custom scripting file?

Lastly, please check the browser console (Press F12) for any errors.