借助于强大的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')){ jqTableObj.find('thead th').removeClass('current'); var fragment = document.createDocumentFragment(); $.each(arr, function(i){ jqTableObj.find('tbody').append(fragment); var Utils = (function() { if(dataType != 'text'){ return aText > bText ? -1 : bText > aText ? 1 : 0; function parseNonText(data, dataType){ //过滤中文字符和$ 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> |