【提出需求】
 
       点击表格头部的时候根据对应列的所有值来进行排序，最终显示排序后的数据行。
 
【具体效果】
 
 
【步骤思路】
 
       点击需要排序列的数据头，获取数据头所在列的索引。通过索引找到每一行所对应列的数据，之后对该列的所有数据进行排序（本实例只进行降序排列），排序结果的每个数据的索引就是该数据所对应行的位置。
 
【问题解决】
 
       1、如何知道那一列需要排序？
 
             想要知道那些一列的数据需要排序，实现的方法有很多种，但是最重要的一点是必须要知道所点击的头部所在的列数。最简单的方法就是给需要排序的头部添加排序列名，之后判断该点击的头部是否是排序列名（判断的方式也有很多种，本实例使用的是className属性，因为就只有一个类名。还有其他方式getAttribute、match、search、indexOf、lastIndexOf等函数），如果是则执行排序处理代码块，如果不是则不做任何的处理。
 
if(this.className)
 
       相关知识点：
 
             文章：JavaScript对Html元素的Class操作 - className、classList、Attribute
 
             文章：JavaScript字符串和数值对象
 
 
 
       2、虽然获取了排序列的索引，但是如何获取每一行的所对应列的数据呢？
 
             排序列有一个特征就是相同一列所在行的索引都是相同的，所以获取了排序列的索引之后，只需要获取每一行的节点集合，然后再访问其节点内容的数据列集合，然后再通过索引去访问对应数据列的数据（通过innerText获取数据的文本值，如果数据是数值字符的话，一般会自动转化为数值，不过最好人为转化以下）。
 
ContTrList[j].getElementsByTagName("td")[this.index].innerText;
 
       相关知识点：
 
             文章：JavaScript之DOM操作总结
 
 
 
        3、虽然获取了每一行的数据，但是如何知道排序后该数据对应的是哪一行数据？
 
             想要解决这个问题也有很多种方式，但是都比较困难，例如可以通过自定义属性，但是这种方式无法解决跨域问题，也可以通过其他数组存储索引等等。本实例使用了二维数组，对每组数组元素的第二个元素赋予该数值对应行的索引值，从而解决无法跨域或者获取麻烦的问题的
 
for(var j = 0; j < ContTrList.length; j++) {
    //该for循环是遍历内容区中的tr标签,并且查找对应的td标签
    sortArray[j][0] = ContTrList[j].getElementsByTagName("td")[this.index].innerText;
    sortArray[j][1] = j;
}
 
        相关知识点：
 
             文章：JavaScript数组Array对象知识点详解
 
             文章： JavaScript创建二维数组或多维数组
 
       注意：排序之前，需要确定行内的数据是数值还是字符串，是升序还是降序等等。通常的方法自然是遍历所有的列数据，看最终返回的结果。本实比较懒，只对第一个进行了判断，在这里安利一波isNaN ()函数。isNaN() 函数用于检查其参数是否是非数字值。如果是非数字值，则返回true，否则返回false。这样我就省去了通过正则表达式去数据是字符还是数值了。
 
//判断是数值排序还是字符排序
if(!isNaN(sortArray[0][0])){
    sortArray.sort(sortNumber);
}else{
    sortArray.sort();
}
 
 
 
        4、获取了行索引之后，如何更新行数据呢？
 
             索引是无法重复的，所以我们可以通过循环去访问排序后的数值所对应的行索引，这里要注意的是我们获取的只是对应行的节点。所以想要更新数据行也有很多种方法，例如：删除容器内的所有数据行子节点，之后通过遍历一个一个的插入。本实例直接通过拼接数据行的HTML字符串，直接更新父容器的数据行。
 
//排序完毕之后开始调序
for(var x = 0; x < ContTrList.length; x++) {
    newNodeHtml += "<tr>" + ContTrList[sortArray[x][1]].innerHTML + "</tr>";
}
//删除当前内容，插入新的内容
Container.innerHTML = newNodeHtml;
 
         相关知识点：
 
             文章：JavaScript之DOM操作总结
 
 
 
【最终代码】
 
//HTML代码
<table border="1" cellpadding="5" style="border-collapse: collapse;text-align: center;">
	<tbody>
		<tr id="HeadTD">
			<td class="sort">姓名</td>
			<td class="sort">学号</td>
			<td class="sort">语文</td>
			<td class="sort">数学</td>
			<td class="sort">英语</td>
			<td class="sort">总分</td>
			<td class="sort">平均分</td>
		</tr>
	</tbody>
	<tbody id="ContTD">
		<tr>
			<td>张三</td>
			<td>220305</td>
			<td>11</td>
			<td>22</td>
			<td>33</td>
			<td>22</td>
			<td>44</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>220302</td>
			<td>33</td>
			<td>44</td>
			<td>66</td>
			<td>99</td>
			<td>33</td>
		</tr>
		<tr>
			<td>黄五</td>
			<td>220307</td>
			<td>22</td>
			<td>55</td>
			<td>22</td>
			<td>55</td>
			<td>66</td>
		</tr>
		<tr>
			<td>赵六</td>
			<td>220303</td>
			<td>44</td>
			<td>22</td>
			<td>33</td>
			<td>66</td>
			<td>88</td>
		</tr>
	</tbody>
</table>

//JavaScript代码
window.onload = function() {
	var HeadTD = document.getElementById("HeadTD");
	var ContTD = document.getElementById("ContTD");
	var HeadList = HeadTD.getElementsByTagName("td");
	var ContTrList = ContTD.getElementsByTagName("tr");
	var sortArray = new Array();
	var newNode;
	for(var i = 0; i < HeadList.length; i++) {
		HeadList[i].index = i;
		HeadList[i].onclick = function() {
			if(this.className) {
				newNode = "";
				for(var j = 0; j < ContTrList.length; j++) {
					sortArray[j] = new Array();
					sortArray[j][0] = ContTrList[j].getElementsByTagName("td")[this.index].innerText;
					sortArray[j][1] = j;
				}
				
				if(!isNaN(sortArray[0][0])){
					sortArray.sort(sortNumber);
				}else{
					sortArray.sort();
				}

				for(var x = 0; x < ContTrList.length; x++) {
					newNode += "<tr>" + ContTrList[sortArray[x][1]].innerHTML + "</tr>";
				}

				ContTD.innerHTML = newNode;
			}
		}
	}
}
function sortNumber(b, a) {
	if(a > b) {
		return 1
	} else if(a < b) {
		return -1
	} else {
		return 0
	}
}
 
 

 
 上示图片是W3School对Javascript sort()的说明。既然可以对Array进行排序，那对于我们从后台接收到json数据如何进行相同的排序呢？让我们来看这样一段json数据。
 
 
排序后 ：
 
 
让我们对这个json文件按照numberPeople进行排序，并将排序后的结果打印出来。
 
<script type="text/javascript">
    //按升序排列
    function up(x,y){
        return x.numberPeople-y.numberPeople
    }
    //降序
    function desc(x,y){
	return y.numberPeople-x.numberPeople;
    }
    //利用jquery中的getJson方法获取json数据
    $.getJSON("../../assets/data/test.json","",function(data){
        var newdata=data.result
        newdata.sort(desc);
        //打印排序后的数据到控制台
        console.log(newdata);
        //注意sort()在原数据上进行排序，不生成副本
        console.log(data); 
    })
</script>
 
注：sort()在原数据上进行排序，不会产生新的数据
 
 

 
上示图片是W3School对Javascript sort()的说明。既然可以对Array进行排序，那对于我们从后台接收到json数据如何进行相同的排序呢？让我们来看这样一段json数据。
 
{
  "result":[
    {
      "id":1,
      "value":2
    },{
      "id":2,
      "value":34
    },{
      "id":3,
      "value":489
    },{
      "id":4,
      "value":45
    },{
      "id":5,
      "value":12
    },
    {
      "id":6,
      "value":23
    },
    {
      "id":7,
      "value":1
    },
    {
      "id":8,
      "value":100
    }
  ]
}  
 
让我们对这个json文件按照value进行排序，并将排序后的结果打印出来。
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
    //按升序排列
    function up(x,y){
        return x.value-y.value
    }

    //利用jquery中的getJson方法获取json数据
  $.getJSON("../../assets/data/test.json","",function(data){
        var newdata=data.result
        newdata.sort(up);
        //打印排序后的数据到控制台
        console.log(newdata);
        //注意sort()在原数据上进行排序，不生成副本
        console.log(data); 
    })
</script>
</body>
</html>
 
console.log(newdata)的结果如下： 
 
 
console.log(data)的结果如下：（再次强调，sort()在原数据上进行排序） 
 
 
如上排序完成。

对json数据进行排序和搜索
 
 
在使用AJAX获取数据时后台返回的大部分都是json数据，在进行程序开发时有时会需要直接对这些json数据在js程序中再进行一定的操作，如排序、搜索等，而不是通过AJAX请求由数据库进行这些操作。
 
今天我就教给大家如何使用数组的方法来实现这些操作:
 
/*假设json就是后台传过来的json数据*/
  var test=[
    {
      price:15,
      id:1,
      description:'这是第一个数据'
    },{
      price:30,
      id:3,
      description:'这是第二个数据'
    },{
      price:5,
      id:2,
      description:'这是第三个数据'
    }
  ];
 
此时可以通过数组的sort方法对json数据进行排序，我们可以将其封装为一个函数，方便操作。
 
  var u=window.u||{};
  u.isArray=function(o) {
    return typeof o=='object'&&Object.prototype.toString.call(o).slice(8,-1).toLowerCase()=='array';
  };
  /**
   * 对json数据按照一定规则进行排列
   * @param  {array} array [需要排序的数组]
   * @param  {string} type  [排序时所依据的字段]
   * @param  {boolean} asc   [可选参数，默认降序，设置为true即为升序]
   * @return {none}       [无返回值]
   */
  u.sort=function(array,type,asc) {
    if(!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
    var asc=asc||false;
    array.sort(function(a,b) {
      if(!asc) {
        return parseFloat(b[type])-parseFloat(a[type]);
      } else {
        return parseFloat(a[type])-parseFloat(b[type]);
      }
    });
  };
 
也可以通过数组的filter方法对json数据进行搜索，我们可以将其封装为一个函数，方便操作。
 
```
  /**
   * 对json数组进行搜索
   * @param  {array} array [需要排序的数组]
   * @param  {string} type  [需要检索的字段]
   * @param  {string} value [字段中应包含的值]
   * @return {array}       [包含指定信息的数组]
   */
  u.search=function(array,type,value) {
    if(!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
    var arr=[];
    arr=array.filter(function(a) { 
      return a[type].toString().indexOf(value)!=-1;
    });
    return arr;
  };
 
可使用下面的方法进行测试：
 
  u.sort(test,'price');
  var s=u.search(test,'description',"一");
  console.table(test);
  console.table(s);
 
测试结果如下图所示：
 
(index)
price
id
description
0
30
3
“这是第二个数据”
1
15
1
“这是第一个数据”
2
5
2
“这是第三个数据”
 
 
(index)
price
id
description
0
15
1
“这是第一个数据”