<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jquery 表格排序</title> <style type="text/css"> thead { background-color : blue; color: white; } tr.odd { background-color: #ddd; } tr.even { background-color: #eee; } .clickable { text-decoration : underline; } .hover { background-color: #5dd354; } .sorted { background-color: #ded070; } .page-number { color: black; margin:2px 10px; padding:2px 5px; } .active { border:solid 1px red; background-color:#76a7d2; } .pager { margin-bottom :10px; margin-left :20px; } </style> <script type="text/javascript" language="javascript" src="js/jquery1.3.2.js"></script> <script type="text/javascript" language="javascript"> $(function() { jquery.fn.alternaterowcolors = function() { //做成插件的形式 $('tbody tr:odd', this).removeclass('even').addclass('odd'); //隔行变色 奇数行 $('tbody tr:even', this).removeclass('odd').addclass('even'); //隔行变色 偶数行 return this; }; $('table.mytable').each(function() { var $table = $(this); //将table存储为一个jquery对象 $table.alternaterowcolors($table); //在排序时隔行变色 $('th', $table).each(function(column) { var findsortkey; if ($(this).is('.sort-alpha')) { //按字母排序 findsortkey = function($cell) { return $cell.find('sort-key').text().touppercase() + '' + $cell.text().touppercase(); }; } else if ($(this).is('.sort-numeric')) { //按数字排序 findsortkey = function($cell) { var key = parsefloat($cell.text().replace(/^[^\d.]*/, '')); return isnan(key) ? 0 : key; }; } else if ($(this).is('.sort-date')) { //按日期排序 findsortkey = function($cell) { return date.parse('1 ' + $cell.text()); }; } if (findsortkey) { $(this).addclass('clickable').hover(function() { $(this).addclass('hover'); }, function() { $(this).removeclass('hover'); }).click(function() { //反向排序状态声明 var newdirection = 1; if ($(this).is('.sorted-asc')) { newdirection = -1; } var rows = $table.find('tbody>tr').get(); //将数据行转换为数组 $.each(rows, function(index, row) { row.sortkey = findsortkey($(row).children('td').eq(column)); }); rows.sort(function(a, b) { if (a.sortkey < b.sortkey) return -newdirection; if (a.sortkey > b.sortkey) return newdirection; return 0; }); $.each(rows, function(index, row) { $table.children('tbody').append(row); row.sortkey = null; }); $table.find('th').removeclass('sorted-asc').removeclass('sorted-desc'); var $sorthead = $table.find('th').filter(':nth-child(' + (column + 1) + ')'); //实现反向排序 if (newdirection == 1) { $sorthead.addclass('sorted-asc'); } else { $sorthead.addclass('sorted-desc'); } //调用隔行变色的函数 $table.alternaterowcolors($table); //移除已排序的列的样式,添加样式到当前列 $table.find('td').removeclass('sorted').filter(':nth-child(' + (column + 1) + ')').addclass('sorted'); $table.trigger('repaginate'); }); } }); }); }); //分页 $(function() { $('table.paginated').each(function() { var currentpage = 0; var numperpage = 10; var $table = $(this); $table.bind('repaginate', function() { $table.find('tbody tr').hide().slice(currentpage * numperpage, (currentpage + 1) * numperpage).show(); }); var numrows = $table.find('tbody tr').length; var numpages = math.ceil(numrows / numperpage); var $pager = $('<p class="pager"></p>'); for (var page = 0; page < numpages; page++) { $('<span class="page-number"></span>').text(page + 1) .bind('click', { newpage: page }, function(event) { currentpage = event.data['newpage']; $table.trigger('repaginate'); $(this).addclass('active').siblings().removeclass('active'); }).appendto($pager).addclass('clickable'); } $pager.insertbefore($table); $table.trigger('repaginate'); $pager.find('span.page-number:first').addclass('active'); }); }); </script> </head> <body> <form id="form1" runat="server"> <p> <table class="mytable paginated"> <thead> <tr> <th class="sort-alpha"> last name </th> <th class="sort-alpha"> first name </th> <th> email </th> <th class="sort-numeric"> due </th> <th class="sort-date"> date </th> <th> web site </th> </tr> </thead> <tbody> <tr> <td> tmith </td> <td> erthn </td> <td> eth@gmail.com </td> <td> $34.00 </td> <td> 14 2009 </td> <td> ftp://www.baidu.com </td> </tr> <tr> <td> ttmith </td> <td> bjohn </td> <td> jsmith@gmail.com </td> <td> $50.00 </td> <td> mar 2009 </td> <td> ftp://www.baidu.com </td> </tr> <tr> <td> csmith </td> <td> john </td> <td> dddd@gmail.com </td> <td> $50.00 </td> <td> mar 2009 </td> <td> http://www.jb51.net </td> </tr> <tr> <td> smith </td> <td> john </td> <td> sdsf@gmail.com </td> <td> $50.00 </td> <td> f32 2009 </td> <td> ffttp://www.jb51.net </td> </tr> </tbody> </table> </p> </form> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery动态操作表格行的方法（附代码）
js点击小图片关联显示大图片
以上就是jquery做出表格本地排序功能的详细内容。