jquery 排序table的列

Jquery对Table表格排序(方法一)

分类： JQUERY开发 CSS开发 2012-12-22 15:45 3452人阅读 评论(0) 收藏 举报
[css] view plaincopy
  1. 在前端对表格排序的Jquery插件有很多，功能也很强大，比如说Jquery Data Tables对表格的处理就相当强大，可对表格进行排序，搜索，分页等操作，不过没有仔细研究过其实现原理。  

      为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。

      该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个<tr>中的html，同时获取每个<tr>标签下 对应获取到的列号的<td>标签中的内容，并取得<th>标签的type属性值，将获取<tr>的 html、<td>的内容和<th>的type属性值拼接成字符串添加到数组array中，然后将表格<tr>中的 html全部置空，根据type属性值的不同采用不同的方法对<td>的内容进行比较，根据比较结果对数组array进行排序，然后将排序后 的数组元素重新赋值给已经置空的<tr>。如果已经对该列排序过了，则直接对数组进行倒置。

先看效果图:

排序前:

按价格排序后

现在来看实现代码吧:

CSS代码:

 

[css] view plaincopy
  1. <style type="text/css">  
  2.         div  
  3.         {  
  4.             width: 1024px;  
  5.             margin: 0 auto; /*div相对屏幕左右居中*/  
  6.         }  
  7.         table  
  8.         {  
  9.             border: solid 1px #666;  
  10.             border-collapse: collapse;  
  11.             width: 100%;  
  12.             cursor: default; /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,default默认光标（通常是一个箭头）*/  
  13.         }  
  14.         tr  
  15.         {  
  16.             border: solid 1px #666;  
  17.             height: 30px;  
  18.         }  
  19.         table thead tr  
  20.         {  
  21.             background-color: #ccc;  
  22.         }  
  23.         td  
  24.         {  
  25.             border: solid 1px #666;  
  26.         }  
  27.         th  
  28.         {  
  29.             border: solid 1px #666;  
  30.             text-align: center;  
  31.             cursor: pointer; /*光标呈现为指示链接的指针（一只手）*/  
  32.         }  
  33.         .sequence  
  34.         {  
  35.             text-align: center;  
  36.         }  
  37.         .hover  
  38.         {  
  39.             background-color: #3399FF;  
  40.         }  
  41.     </style>  


HTML代码:

[css] view plaincopy
  1. <div>  
  2.         <table id="tableSort">  
  3.             <thead>  
  4.                 <tr>  
  5.                     <th type="number">  
  6.                         序号  
  7.                     </th>  
  8.                     <th type="string">  
  9.                         书名  
  10.                     </th>  
  11.                     <th type="number">  
  12.                         价格（元）  
  13.                     </th>  
  14.                     <th type="string">  
  15.                         出版时间  
  16.                     </th>  
  17.                     <th type="number">  
  18.                         印刷量（册）  
  19.                     </th>  
  20.                     <th type="ip">  
  21.                         IP  
  22.                     </th>  
  23.                 </tr>  
  24.             </thead>  
  25.             <tbody>  
  26.                 <tr class="hover">  
  27.                     <td class="sequence">  
  28.                         1  
  29.                     </td>  
  30.                     <td>  
  31.                         狼图腾  
  32.                     </td>  
  33.                     <td>  
  34.                         29.80  
  35.                     </td>  
  36.                     <td>  
  37.                         2009-10  
  38.                     </td>  
  39.                     <td>  
  40.                         50000  
  41.                     </td>  
  42.                     <td>  
  43.                         192.168.1.125  
  44.                     </td>  
  45.                 </tr>  
  46.                 <tr>  
  47.                     <td class="sequence">  
  48.                         2  
  49.                     </td>  
  50.                     <td>  
  51.                         孝心不能等待  
  52.                     </td>  
  53.                     <td>  
  54.                         29.80  
  55.                     </td>  
  56.                     <td>  
  57.                         2009-09  
  58.                     </td>  
  59.                     <td>  
  60.                         800  
  61.                     </td>  
  62.                     <td>  
  63.                         192.68.1.125  
  64.                     </td>  
  65.                 </tr>  
  66.                 <tr>  
  67.                     <td class="sequence">  
  68.                         3  
  69.                     </td>  
  70.                     <td>  
  71.                         藏地密码2  
  72.                     </td>  
  73.                     <td>  
  74.                         28.00  
  75.                     </td>  
  76.                     <td>  
  77.                         2008-10  
  78.                     </td>  
  79.                     <td>  
  80.                     </td>  
  81.                     <td>  
  82.                         192.102.0.12  
  83.                     </td>  
  84.                 </tr>  
  85.                 <tr>  
  86.                     <td class="sequence">  
  87.                         4  
  88.                     </td>  
  89.                     <td>  
  90.                         藏地密码1  
  91.                     </td>  
  92.                     <td>  
  93.                         24.80  
  94.                     </td>  
  95.                     <td>  
  96.                         2008-10  
  97.                     </td>  
  98.                     <td>  
  99.                     </td>  
  100.                     <td>  
  101.                         215.34.126.10  
  102.                     </td>  
  103.                 </tr>  
  104.                 <tr>  
  105.                     <td class="sequence">  
  106.                         5  
  107.                     </td>  
  108.                     <td>  
  109.                         设计模式之禅  
  110.                     </td>  
  111.                     <td>  
  112.                         69.00  
  113.                     </td>  
  114.                     <td>  
  115.                         2011-12  
  116.                     </td>  
  117.                     <td>  
  118.                     </td>  
  119.                     <td>  
  120.                         192.168.1.5  
  121.                     </td>  
  122.                 </tr>  
  123.                 <tr>  
  124.                     <td class="sequence">  
  125.                         6  
  126.                     </td>  
  127.                     <td>  
  128.                         轻量级 Java EE 企业应用实战  
  129.                     </td>  
  130.                     <td>  
  131.                         99.00  
  132.                     </td>  
  133.                     <td>  
  134.                         2012-04  
  135.                     </td>  
  136.                     <td>  
  137.                         5000  
  138.                     </td>  
  139.                     <td>  
  140.                         192.358.1.125  
  141.                     </td>  
  142.                 </tr>  
  143.                 <tr>  
  144.                     <td class="sequence">  
  145.                         7  
  146.                     </td>  
  147.                     <td>  
  148.                         Java 开发实战经典  
  149.                     </td>  
  150.                     <td>  
  151.                         79.80  
  152.                     </td>  
  153.                     <td>  
  154.                         2012-01  
  155.                     </td>  
  156.                     <td>  
  157.                         2000  
  158.                     </td>  
  159.                     <td>  
  160.                         192.168.1.25  
  161.                     </td>  
  162.                 </tr>  
  163.                 <tr>  
  164.                     <td class="sequence" onclick="sortArray()">  
  165.                         8  
  166.                     </td>  
  167.                     <td>  
  168.                         Java Web 开发实战经典  
  169.                     </td>  
  170.                     <td>  
  171.                         69.80  
  172.                     </td>  
  173.                     <td>  
  174.                         2011-11  
  175.                     </td>  
  176.                     <td>  
  177.                         2500  
  178.                     </td>  
  179.                     <td>  
  180.                         215.168.54.125  
  181.                     </td>  
  182.                 </tr>  
  183.             </tbody>  
  184.         </table>  
  185.     </div>  


 

Jquery代码部分

[javascript] view plaincopy
    1. <script type="text/javascript">  
    2.         $(function () {  
    3.             var tableObject = $('#tableSort'); //获取id为tableSort的table对象  
    4.             var tbHead = tableObject.children('thead'); //获取table对象下的thead  
    5.             var tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的th  
    6.             var tbBody = tableObject.children('tbody'); //获取table对象下的tbody  
    7.             var tbBodyTr = tbBody.find('tr'); //获取tbody下的tr  
    8.   
    9.             var sortIndex = -1;  
    10.   
    11.             tbHeadTh.each(function () {//遍历thead的tr下的th  
    12.                 var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号  
    13.                 //给表态th增加鼠标位于上方时发生的事件  
    14.                 $(this).mouseover(function () {  
    15.                     tbBodyTr.each(function () {//编列tbody下的tr  
    16.                         var tds = $(this).find("td"); //获取列号为参数index的td对象集合  
    17.                         $(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式  
    18.                     });  
    19.                 }).mouseout(function () {//给表头th增加鼠标离开时的事件  
    20.                     tbBodyTr.each(function () {  
    21.                         var tds = $(this).find("td");  
    22.                         $(tds[thisIndex]).removeClass("hover");//鼠标离开时移除td对象上的样式  
    23.                     });  
    24.                 });  
    25.   
    26.                 $(this).click(function () {//给当前表头th增加点击事件  
    27.                     var dataType = $(this).attr("type");//点击时获取当前th的type属性值  
    28.                     checkColumnValue(thisIndex, dataType);  
    29.                 });  
    30.             });  
    31.   
    32.             $("tbody tr").removeClass(); //先移除tbody下tr的所有css类  
    33.             //table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色  
    34.             $("tbody tr").mouseover(function () {  
    35.                 $(this).addClass("hover");  
    36.             }).mouseout(function () {  
    37.                 $(this).removeClass("hover");  
    38.             });  
    39.   
    40.             //对表格排序  
    41.             function checkColumnValue(index, type) {  
    42.                 var trsValue = new Array();  
    43.   
    44.                 tbBodyTr.each(function () {  
    45.                     var tds = $(this).find('td');  
    46.                     //获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中  
    47.                     trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());  
    48.                     $(this).html("");  
    49.                 });  
    50.   
    51.                 var len = trsValue.length;  
    52.   
    53.                 if (index == sortIndex) {  
    54.                 //如果已经排序了则直接倒序  
    55.                     trsValue.reverse();  
    56.                 } else {  
    57.                     for (var i = 0; i < len; i++) {  
    58.                         //split() 方法用于把一个字符串分割成字符串数组  
    59.                         //获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串\数字\Ip  
    60.                         type = trsValue[i].split(".separator")[0];  
    61.                         for (var j = i + 1; j < len; j++) {  
    62.                             //获取每行分割后数组的第二个值,即文本值  
    63.                             value1 = trsValue[i].split(".separator")[1];  
    64.                             //获取下一行分割后数组的第二个值,即文本值  
    65.                             value2 = trsValue[j].split(".separator")[1];  
    66.                             //接下来是数字\字符串等的比较  
    67.                             if (type == "number") {  
    68.                                 value1 = value1 == "" ? 0 : value1;  
    69.                                 value2 = value2 == "" ? 0 : value2;  
    70.                                 if (parseFloat(value1) > parseFloat(value2)) {  
    71.                                     var temp = trsValue[j];  
    72.                                     trsValue[j] = trsValue[i];  
    73.                                     trsValue[i] = temp;  
    74.                                 }  
    75.                             } else if (type == "ip") {  
    76.                                 if (ip2int(value1) > ip2int(value2)) {  
    77.                                     var temp = trsValue[j];  
    78.                                     trsValue[j] = trsValue[i];  
    79.                                     trsValue[i] = temp;  
    80.                                 }  
    81.                             } else {  
    82.                                 if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器  
    83.                                     var temp = trsValue[j];  
    84.                                     trsValue[j] = trsValue[i];  
    85.                                     trsValue[i] = temp;  
    86.                                 }  
    87.                             }  
    88.                         }  
    89.                     }  
    90.                 }  
    91.   
    92.                 for (var i = 0; i < len; i++) {  
    93.                     $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);  
    94.                 }  
    95.   
    96.                 sortIndex = index;  
    97.             }  
    98.   
    99.             //IP转成整型  
    100.             function ip2int(ip) {  
    101.                 var num = 0;  
    102.                 ip = ip.split(".");  
    103.                 num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);  
    104.                 return num;  
    105.             }  
    106.   
    107.         })  
    108.     </script> 

posted on 2015-07-06 16:56  静以修身！  阅读(1772)  评论(0)  编辑  收藏  举报

导航