jQuery 表格排序插件 Tablesorter 使用

http://blog.csdn.net/leixiaohua1020/article/details/12582373

jQuery 表格排序插件 Tablesorter 使用方式如下：

1.引入头文件（注意一定要把jQuery放在前面）：

[html] view plaincopy

1. <script src="lib/jquery-1.8.3.min.js"></script>  
2. <!--tablesorter-->  
3. <link href="css/css_tablesorter_green/style.css" rel="stylesheet" type="text/css" />  
4. <script type="text/javascript" src="lib/jquery.tablesorter.js"></script>  
5. <script type="text/javascript">  
6.         $(document).ready(function(){  
7.         $("#alltable").tablesorter();       
8.     });   
9. </script>  

2.在需要使用排序的<Table>上无需做任何设定，很方便：

[html] view plaincopy

1. <table id="alltable" class="tablesorter"  width="584">   
2. <thead>   
3. <tr>   
4.     <th>Last Name</th>   
5.     <th>First Name</th>   
6.     <th>Email</th>   
7.     <th>Due</th>   
8.     <th>Web Site</th>   
9. </tr>   
10. </thead>   
11. <tbody>   
12. <tr>   
13.     <td>Smith</td>   
14.     <td>John</td>   
15.     <td>[e-mail]</td>   
16.     <td>$50.00</td>   
17.     <td>http://www.jsmith.com</td>   
18. </tr>   
19. <tr>   
20.     <td>Bach</td>   
21.     <td>Frank</td>   
22.     <td>[e-mail]</td>   
23.     <td>$50.00</td>   
24.     <td>http://www.frank.com</td>   
25. </tr>   
26. <tr>   
27.     <td>Doe</td>   
28.     <td>Jason</td>   
29.     <td>[e-mail]</td>   
30.     <td>$100.00</td>   
31.     <td>http://www.jdoe.com</td>   
32. </tr>   
33. <tr>   
34.     <td>Conway</td>   
35.     <td>Tim</td>   
36.     <td>[e-mail]</td>   
37.     <td>$50.00</td>   
38.     <td>http://www.timconway.com</td>   
39. </tr>   
40. </tbody>   
41. </table>   

在<thead>上就会有两个小三角符号，点击可以用于排序。

Tablesorter下载地址：http://download.csdn.net/detail/leixiaohua1020/6377187

PS: After AJAX, the tablesorter does not work any more. 

Reason:

http://stackoverflow.com/questions/3210933/jquery-tablesorter-plugin-does-not-work-after-ajax-call

The new DOM elements are not binded to the JavaScript events. jQuery handles a similar problem using it's 'live' function. Once the AJAX call has completed, rerun the javascript in document.ready().

My Solution:

$.ajax({            type: "GET",            url: "/Job/Filter/" + userId,            data: { status: status },            error: function (xhr, ajaxOptions, thrownError) {                alert('Error during process: \n' + xhr.status);            }        })        .done(function (partialViewResult) {            $("#jobsdiv").empty();            $("#jobsdiv").html(partialViewResult);            $.each(                $('.dropdown-toggle'), function () {                    $(this).append("  <span class='caret'></span>");                    $(this).attr("data-toggle", "dropdown");                }            );            $(document).ready(function () {                $("#jobsTable").tablesorter();            });        });

Just rerun the .ready(), it will work again.