js实现表格根据字段排序

定义和用法
sort() 方法用于对数组的元素进行排序。
语法
arrayObject.sort(sortby)
参数 描述
sortby 可选。规定排序顺序。必须是函数。
返回值
对数组的引用。请注意,数组在原数组上进行排序,不生成副本。
说明
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
例子:

  1. <script type=“text/javascript”>  
  2.   
  3. function sortNumber(a,b)  
  4. {  
  5. return a – b  
  6. }  
  7.   
  8. var arr = new Array(6)  
  9. arr[0] = “10”  
  10. arr[1] = “5”  
  11. arr[2] = “40”  
  12. arr[3] = “25”  
  13. arr[4] = “1000”  
  14. arr[5] = “1”  
  15.   
  16. document.write(arr + “<br />”)  
  17. document.write(arr.sort(sortNumber))  
  18.   
  19. </script>  

HTMLTableElement:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

JS:

  1. <script type=“text/javascript”>  
  2. function sortTable(tableId,col,dataType){  
  3.     var mtable = $(‘table#’+tableId);  
  4.     var mtrs = new Array;  
  5.     for(var i = 0;i<mtable[0].rows.length;i++){  
  6.         mtrs.push(mtable[0].rows[i]);  
  7.     }  
  8.     //alert(mtable);  
  9.     $.each(mtrs, function(index,row){  
  10.         //alert($(this).find(“.”+col,mtable).html());  
  11.         row.sortKey = $(this).find(“.”+col,mtable).html();  
  12.     });  
  13.     mtrs.sort(function(a,b){  
  14.     //  alert(a);  
  15.     //  alert(b);  
  16.         mtra = dataConvert(a.sortKey,dataType);  
  17.         mtrb = dataConvert(b.sortKey,dataType);  
  18.         if(mtra < mtrb){  
  19.             return –1;  
  20.         }else if(mtra > mtrb){  
  21.             return 1;  
  22.         }else{  
  23.             return 0;  
  24.         }  
  25.     });  
  26.     $.each( mtrs, function( index, row ){  
  27.         mtable.children(‘tbody’).append(row);  
  28.         row.sortKey = null;  
  29.     });  
  30.     jQuery.fn.alterRowClass = function()  
  31.     {  
  32.         $(‘tbody tr:odd’, this).removeClass(‘uneven’).addClass(‘even’);  
  33.         $(‘tbody tr:even’, this).removeClass(‘even’).addClass(‘uneven’);  
  34.         return this;  
  35.     }  
  36.     mtable.alterRowClass();  
  37.       
  38. }  
  39.   
  40. function dataConvert(mValue,dataType){  
  41.     switch  (dataType) {  
  42.         case “int”:  
  43.             return parseInt(mValue);  
  44.         case “ip”:  
  45.             return ip2int(mValue);  
  46.         case “user”:  
  47.             return mValue.toString();  
  48.         case “date”:  
  49.             return new Date(Date.parse(mValue));  
  50.         default :  
  51.             return mValue.toString();  
  52.     }  
  53. }  
  54.   
  55. function ip2int(ip){  
  56.     var num = 0;  
  57.     ip = ip.split(“.”);  
  58.     num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);  
  59.     return num;   
  60. }  
  61. </script>   

HTML:

  1. <span onclick = “sortTable(‘baklist’,$(this).attr(‘class’),’ip’);” class=“row_5”><?php echo $L[‘DATA_ADDRESS’]; ?></span>  

未经允许不得转载:ganlei的个人博客 » js实现表格根据字段排序

赞 (0)
分享到:更多 ()