实现jQuery table内容点击标题排序
分类:实例代码
jQuery table内容点击标题排序属于前端实例代码,有关更多实例代码大家可以查看。
如果一个table表格中存储的是不同类型的数据的话,可能在查看数据的时候,需要根据一定的顺序排序。
下面就通过一段jQuery代码实例演示一下如何实现此功能.
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</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 src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/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(){ //将table存储为一个jquery对象 var $table = $(this); //在排序时隔行变色 $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 = $('<div class="pager"></div>'); 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"> <div> <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> tp://www.baidu.com </td> </tr> <tr> <td> antzone </td> <td> pipipi.net </td> <td> jsmith@gmail.com </td> <td> $50.00 </td> <td> Mar 2009 </td> <td> pipipi.net </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.pipipi.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.pipipi.net</td> </tr> </tbody> </table> </div> </form> </body> </html>
jQuery table内容点击标题排序,这样的场景在实际项目中还是用的比较多的,关于jQuery table内容点击标题排序就介绍到这了。