HTML 表格排序 PHP 实现NBA常规赛数据统计

用到jQuery Vue

目标：

步骤：

1. 获取链接
   
2. 爬取链接

   public function get($url)
   {
       $this_header = array("content-type: application/x-www-form-urlencoded;charset=UTF-8");
       $this->curl = curl_init();
       curl_setopt($this->curl, CURLOPT_CONNECTTIMEOUT, 8);
       curl_setopt($this->curl, CURLOPT_URL, $url);
       curl_setopt($this->curl, CURLOPT_HEADER, 0);
       curl_setopt($this->curl, CURLOPT_USERAGENT, $this->user_agent);
       curl_setopt($this->curl, CURLOPT_HTTPHEADER, $this->host);
       curl_setopt($this->curl, CURLOPT_RETURNTRANSFER, 1);
       $data = curl_exec($this->curl);
       curl_close($this->curl);
       return $data;
   }
   

3. 处理爬取的内容：

   $shujujson = $shuju->get($url);
   $shujujson=strstr($shujujson, '(');
   $shujujson=str_replace('(', '', $shujujson);
   $shujujson=str_replace(')', '', $shujujson);
   

4. 展示演示地址

源码：

// https://nba.stats.qq.com/stats/detail/?order=defen&type=player
// 腾讯体育
header('Access-Control-Allow-Origin:*'); // *代表允许任何网址请求
// 爬取页面，貌似直接Ajax需要跨域，为了方便直接爬虫
class http_no_cookie
{
    private $curl;
    public $host = array("Host"=>"ziliaoku.sports.qq.com");
    public $user_agent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36";
    public function get($url)
    {
        $this_header = array("content-type: application/x-www-form-urlencoded;charset=UTF-8");
        $this->curl = curl_init();
        curl_setopt($this->curl, CURLOPT_CONNECTTIMEOUT, 8);
        curl_setopt($this->curl, CURLOPT_URL, $url);
        curl_setopt($this->curl, CURLOPT_HEADER, 0);
        curl_setopt($this->curl, CURLOPT_USERAGENT, $this->user_agent);
        curl_setopt($this->curl, CURLOPT_HTTPHEADER, $this->host);
        curl_setopt($this->curl, CURLOPT_RETURNTRANSFER, 1);
        $data = curl_exec($this->curl);
        curl_close($this->curl);
        return $data;
    }
}



$shuju=new http_no_cookie();
// 2019-2020
$url='http://ziliaoku.sports.qq.com/cube/index?cubeId=10&dimId=52&from=sportsdatabase&order=t70¶ms=t2:2019|t3:1|&limit=0,50&callback=jQuery19107997312163519312_1591767976854&_=1591767976855';
$shujujson = $shuju->get($url);
$shujujson=strstr($shujujson, '(');
$shujujson=str_replace('(', '', $shujujson);
$shujujson=str_replace(')', '', $shujujson);
?>
	<style>
		@charset "utf-8";
			
		body {
		  color: #333;
		  text-align: center;
		  font: 12px "微软雅黑";
		}
		
		ul,
		ol,
		li {
		  list-style-type: none;
		  vertical-align: 0;
		}
		
		
		a {
		  outline-style: none;
		  color: blue|green;
		  text-decoration: none
		}
		
		a:hover {
		  color: #D40000;
		  text-decoration: none
		}
		
		.clear {
		  height: 0;
		  overflow: hidden;
		  clear: both
		}
		
		.datouwang {
		  height: 100px;
		  line-height: 100px;
		  font-size: 30px;
		  font-family: "微软雅黑";
		  text-align: center;
		  font-weight: normal
		}
		
		#chenkbox {
		  margin: 0px auto;
		  position: relative;
		}
		
		table {
			margin: auto;
		  width: 95%;
		  border-collapse: collapse;
		  border-spacing: 0;
		  table-layout: fixed;
		  background-color: #fff;
		  opacity: 0.7;
		}
		
		th {
		  background: #ebf3f0;
		  font-size: 13px;
		  color: #000002;
		  height: 25px;
		  cursor: pointer;
		}
		
		th,
		td {
		  text-align: center;
		  border: 1px solid #dcdbdb;
		  padding: 8px 10px;
		}
		
		#box {
		  position: absolute;
		  display: none;
		  background: #fff;
		  text-align: center;
		  top: 0;
		  background-color: #000;
		  background-color: rgba(0, 0, 0, 0.8);
		  color: #fff;
		  height: 100%;
		  cursor: move;
		}
		
		#box p {
		  line-height: 34px;
		}
		
		tr{
			box-shadow: 3px 3px 3px #888888;
		}
		</style>

	<div id="chenkbox"> 
		<table id="tableSort">
			<tr>
				<th colspan="20">NBA 常规赛成绩（前50名）</th>
			</tr>
			<tr>
				<th v-for="(type_son,index) in type" v-on:click="sortTable(index)" title="点击排序"> {{type_son}} </th>
			</tr>
			<tr v-for="(list_son,index) in list">
				<td v-for="type_val_son in type_val">{{list_son[type_val_son]}}</td>
			</tr> 
		</table>
			<div id="box"></div>
	</div> 
	<script src="http://wx0725.top/js/vue.min.js"></script>
	<script src="http://wx0725.top/js/mui.min.js"></script>
	<script src="http://wx0725.top/js/jquery.min.js"></script>
 
<script>
	var nba_data = new Vue({
		el:'#chenkbox',
		data:{ 
			list: echo json_encode(json_decode($shujujson)->data->nbaPlayerSeasonStatRank);?>,
			type:['排名','球员','球队','得分','出手数','命中率','3分出手','3分命中率','罚球数','罚球命中率','篮板','前场篮板','后场篮板','助攻','抢断','盖帽','失误','犯规','场次','上场时间(分)'],
			type_val:['p','cnName','teamName','points','fgAttempted','fgPCT','threesAttempted','threesPCT','ftAttempted','ftPCT','rebounds','offensiveRebounds','defensiveRebounds','assists','steals','blocks','turnovers','fouls','gamesStarted','minutes'],
		},
		mounted:function(){
			// p_init();
		}
	});			
	p_no_init();
	/**数组根据数组对象中的某个属性值进行排序的方法 
	     * 使用例子：newArray.sort(sortBy('number',false)) //表示根据number属性降序排列;若第二个参数不传递，默认表示升序排序
	     * @param attr 排序的属性 如number属性
	     * @param rev true表示升序排列，false降序排序
	     * */
	function sortBy(attr,rev){
		//第二个参数没有传递 默认升序排列
		if(rev ==  undefined){
			rev = 1;
		}else{
			rev = (rev) ? 1 : -1;
		}
		
		return function(a,b){
			a = a[attr];
			b = b[attr];
			if(a < b){
				return rev * -1;
			}
			if(a > b){
				return rev * 1;
			}
			return 0;
		} 
	}
	// 没有p属性
	function p_no_init(){
		for(var i=0;i<nba_data.list.length;i++)
			nba_data.list[i].p=i;
	}
	function p_init(){ 
		for(var i=0;i<nba_data.list.length;i++)
			nba_data.list[i]['p']=i; 
	}
	function sortTable(id){
		nba_data.list=nba_data.list.sort(sortBy(nba_data.type_val[id],false));
		p_init();
	}
	// console.log(arr.sort(compare('age')));
</script>