jquery table 排序
借助于强大的jquery库,通过一些简单的js代码来实现对table数据列进行排序。排序是通过调整table的tr的顺序重新显示,全部在客户端上完成,不需要和服务器交互,因此减轻了服务器的压力。查看Demo请猛点这里。
实现排序的js代码如下:
function tableSort(jqTableObj) { jqTableObj.find('thead th').click( function(){ var dataType = $(this).attr('dataType') || 'text'; var index = jqTableObj.find('thead th').index(this) + 1; var arr = []; var row = jqTableObj.find('tbody tr'); $.each(row, function(i){arr[i] = row[i]}); if($(this).hasClass('current')){ arr.reverse(); } else { arr.sort(Utils.sortStr(index, dataType)) jqTableObj.find('thead th').removeClass('current'); $(this).addClass('current'); } var fragment = document.createDocumentFragment(); $.each(arr, function(i){ fragment.appendChild(arr[i]); }); jqTableObj.find('tbody').append(fragment); } ); var Utils = (function() { function sortStr(index, dataType){ return function(a, b){ var aText=$(a).find('td:nth-child(' + index + ')').attr('_order') || $(a).find('td:nth-child(' + index + ')').text(); var bText=$(b).find('td:nth-child(' + index + ')').attr('_order') || $(b).find('td:nth-child(' + index + ')').text(); if(dataType != 'text'){ aText=parseNonText(aText, dataType); bText=parseNonText(bText, dataType); return aText > bText ? -1 : bText > aText ? 1 : 0; } else { return aText.localeCompare(bText) } } } function parseNonText(data, dataType){ switch(dataType){ case 'int': return parseInt(data) || 0 case 'float': return parseFloat(data) || 0 default : return filterStr(data) } } //过滤中文字符和$ function filterStr(data){ if (!data) { return 0; } return parseFloat(data.replace(/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/,'$1')); } return {'sortStr' : sortStr}; })(); }
要想让上面的代码工作,需要在原有的table中注意几点。
1、表头的tr其父元素为thead,另外表头列使用th,同时要使用dataType属性名来标示数据的类型,类型可以为text(默认),int和float;
2、显示table数据的tr父元素为tbody,显示数据的列用td,可以使用_order属性指定该字段的真实值。
table 示例如下:
<table> <thead> <tr> <th datatype="int">ID</th> <th datatype="text">Username</th> <th datatype="float" class="current">Revenue</th> </tr> </thead> <tbody> <tr> <td>1032</td> <td>Zhang</td> <td _order="127579">$ 127,579.00</td> </tr> <tr> <td>1074</td> <td>gm1</td> <td _order="37331">$ 37,331.00</td> </tr> </tbody> <tfoot> <tr> <th colspan="2">Summary</th> <th>$ 164,910.00 </tr> </tfoot> </table>