JavaScript sort() 方法实现升降排序(含ajax+表格升降序案例)

本文链接：https://blog.csdn.net/weixin_45200954/article/details/105108307

javascript中sort的运用:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button>排序</button>
		<h1></h1>
		<h2></h2>
	</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
<script>
	$(function(){
		$("button").click(function(){
//			sort() 方法用于对数组(切记)的元素进行排序, 排序顺序可以是字母或数字，并按升序或降序。
			var array=[1,33,23,67,99,2,21];
			array.sort();
			$("h1").html(array+" <br>");
//2.默认降序	------------------------------------------------		
			var data=[22,13,2,55,1,0.5];
			data.sort(function(a,b){
				return b-a;
			})
			$("h2").html(data+"<br>");
		})
	})
</script>

在这里插入图片描述

接下来是利用Ajax+sort()方法实现表格数据的升降序:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
			background-color: white;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		table{
			width: 50%;
			height: 50%;
			border-collapse: collapse;
		}
		th,td{
			border: 2px solid #ccc;
			text-align: center;
		}
	</style>
	<body>
		<table>
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th class="salary">薪资</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
	</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
<!--//sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。-->
<script>
	$.ajax({
		type:"get",
		url:"result.json",
		async:true,
		//请求成功时处理 success:function(){}
		success:function(data){
			Updata(data);
			$(function(){
				var click=true;
				$(".salary").click(function(){
					if(click){
					var dataArray=data.ROWS_DETAIL;//获取json中数据的数组ROWS_DETAIL
					dataArray.sort(function(a,b){
						return a.price-b.price;
					})
					Updata(data);
					click=false;
					}else{
					var dataArray=data.ROWS_DETAIL;//获取json中数据的数组ROWS_DETAIL
					dataArray.sort(function(a,b){
						return b.price-a.price;
					})
						Updata(data);
						click=true;
					}
					
				})
			})	
		}
	});
	function Updata(data){
//		$.each(array, function(index,element) {index-选择器的 index 位置,element - 当前的元素（也可使用 "this" 选择器）。
//			
//		});传进去的是一个json的数组
var str="";
		$.each(data.ROWS_DETAIL, function(index,element) {
			
			str+="<tr><td>"+element['ID']+"</td><td>"+element['name']+"</td><td>"+element['price']+"</td></tr>";
		});
		$("tbody").html(str);
}
</script>

表格升序:

表格降序：

针对Ajax技术中success:function(){}的解释补充:

success：

说明:请求成功后调用的回调函数,要求为Function类型的参数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数
}