时间:2021-07-01 10:21:17 帮助过:14人阅读
<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').leng th; 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> PHP </td> <td> $34.00 </td> <td> 14 2009 </td> <td> PHP </td> </tr> <tr> <td> TTmith </td> <td> BJohn </td> <td> PHP </td> <td> $50.00 </td> <td> Mar 2009 </td> <td> PHP </td> </tr> <tr> <td> CSmith </td> <td> John </td> <td> PHP </td> <td> $50.00 </td> <td> Mar 2009 </td> <td> PHP </td> </tr> <tr> <td> Smith </td> <td> John </td> <td> PHP </td> <td> $50.00 </td> <td> f32 2009 </td> <td> PHP </td> </tr> </tbody> </table> </p> </form> </body> </html>
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
jQuery实现表格隔行变色与鼠标滑过高亮(附代码)
jQuery给html表格动态添加行方法总结
grep()方法实现数组过滤筛选
以上就是jquery实现表格本地排序步骤详解(附代码)的详细内容,更多请关注Gxl网其它相关文章!