Html5页面显示表

顺晟科技

2021-09-01 11:24:02

169

Html：

<!DOCTYPE html>
<html>
	<head>
		 <meta charset="utf-8">
		  <meta name="viewport" content="width=device-width, initial-scale=1">
		  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<title>Pick One</title>
	</head> 
	<style type="text/css">
		span{
			/*display:inline;*/
			margin:0 auto
		}	
		.header
		{ 
		   background: #ccc;
		   display: flex;
		   justify-content: space-between; 
		}
		.nowtime
		{
			font-size:32px;
			font-weight:bold; 
		}
		.tname
		{
			font-size:48px;
			color:#9400D3; 
		}
		.endtime
		{
			font-size:32px;
			color:#000F7F; 
		}   
	</style>
	<script>     
	           var Retimer=0;
			   var rtimr=0;
			   var pagecount=0;
			   var count=0;
			   var basecount=10;
			   var json=null;
				$(document).ready(function() { 
					getData();
					window.setInterval(function(){ getTime() },1000);  
				})
				/*
				function realSysTime(){ 
				     	   var now=new Date(); 
				     	   var year=now.getFullYear();
				     	   var month=now.getMonth();
				     	   var date=now.getDate();
				     	   var day=now.getDay();
				     	   var hour=now.getHours();
				     	   var minu=now.getMinutes();
				     	   var sec=now.getSeconds();
				     	   if(Number(sec)<10){
				     		   sec="0"+sec.toString();
				     	   }
				     	   month=month+1; 
				     	   var arr_week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六"); 
				     	   var week=arr_week[day]; 
				     	   var time=year+"年"+month+"月"+date+"日 "+week+" "+hour+":"+minu+":"+sec; //组合系统时间  
						   document.getElementById("time").innerHTML=time;
				 } 
				 */
				//获取数据
				 function getData(){
					 $.ajax({
					     url : "http://localhost:14047/bry.ashx",//请求地址
					     dataType : "json",//数据格式 
					     type : "get",//请求方式
					     async : false,//是否异步请求
					     success : function(data) {   //如何发送成功
					     console.log(data);
					 	 console.log(data["Title"]);
					 	 document.getElementById("ttt1").innerHTML=data["Title"];
					 	 
					 	 json = eval (data["Data"]);
						 Retimer=data["RefreshTime"];
						 rtimr=Retimer;  
						 show(json); 
					     },
					 }) 
					}  
					
					//数据分页
					function show(json){  
						var flg=false;
						$("#table  tr:not(:first)").html("");//清空表格内容
						var nowcount=pagecount*basecount+basecount; 
						if(nowcount>=json.length)
						{ 
							flg=true;
							nowcount=json.length;
						} 
						for(var i=0 +pagecount*basecount;i< nowcount;i++){    //遍历data数组
						          var row=table.insertRow(table.rows.length);
								  var c1=row.insertCell(0);
								  c1.innerHTML=json[i].ID;
								  var c2=row.insertCell(1);
								  c2.innerHTML=json[i].Name;
								  var c3=row.insertCell(2);
								  c3.innerHTML=json[i].Age;
								  count=count++;
						    } 
						pagecount=pagecount+1;
						if(flg)	
						{
							pagecount=0;
							count=0; 
						}
					}
					
					//定时
				   function getTime(){ 
						 document.getElementById("countdown").innerHTML=Retimer;
						 Retimer=Retimer-1;
						if(Retimer==-1)	
						{  
							show(json) 
							Retimer= rtimr;
						}
				        var now = new Date(); 
						var year = now.getFullYear();      
						var month = now.getMonth() +1;    
						var day = now.getDate();           
						var hh = now.getHours();           
						var mm = now.getMinutes();         
						var ss = now.getSeconds();    
						var clock = year + "-";
						
						if(month < 10)
							clock += "0";
			
						clock += month + "-";
			
						if(day < 10)
							clock += "0";
			
						clock += day + " ";
			
						if(hh < 10)
							clock += "0";
			
						clock += hh + ":";
						if (mm < 10) clock += \'0\';
						clock += mm + ":";
			
						if (ss < 10) clock += \'0\';
						clock += ss; 
				        document.getElementById("time").innerHTML=clock;
				    } 
	</script>
	<body>
		<div class="header">
			<span class="nowtime" id=\'time\'></span>   
		    <span class="tname" id=\'ttt1\'></span>
			<span class="endtime">倒计时
				<span class="timecountdown" id=\'countdown\'></span>
			</span> 
		</div>
		
		<div>
			<table id=\'table\' class="table table-bordered table table-info table-hover">
			    <thead class="text-center">
			      <tr>
			        <th>ID</th> 
					<th>Name</th> 
					<th>Age</th> 
			      </tr>
			    </thead>
			</table>
		</div> 
	</body>
</html>

　　后端：.NET ashx

    public class bry: IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            Dictionary<string, object> param = new Dictionary<string, object>();
            string ret = "";
            DataTable dt = new DataTable();//创建表
            dt.Columns.Add("ID", typeof(Int32));//添加列
            dt.Columns.Add("Name", typeof(String));
            dt.Columns.Add("Age", typeof(Int32));
            dt.Rows.Add(new object[] { 1, "张三", 20 });//添加行
            dt.Rows.Add(new object[] { 2, "李四", 25 });
            dt.Rows.Add(new object[] { 3, "王五", 30 });
            dt.Rows.Add(new object[] { 4, "张三", 20 });//添加行
            dt.Rows.Add(new object[] { 5, "李四", 25 });
            dt.Rows.Add(new object[] { 6, "王五", 30 });
            dt.Rows.Add(new object[] { 7, "张三", 20 });//添加行
            dt.Rows.Add(new object[] { 8, "李四", 25 });
            dt.Rows.Add(new object[] { 9, "王五", 30 });
            dt.Rows.Add(new object[] { 10, "张三", 20 });//添加行
            dt.Rows.Add(new object[] { 11, "李四", 25 });
            dt.Rows.Add(new object[] { 12, "王五", 30 });
            dt.Rows.Add(new object[] { 13, "张三", 20 });//添加行
            dt.Rows.Add(new object[] { 14, "李四", 25 });
            dt.Rows.Add(new object[] { 15, "王五", 30 });
            dt.Rows.Add(new object[] { 16, "张三", 20 });//添加行
            dt.Rows.Add(new object[] { 17, "李四", 25 });
            dt.Rows.Add(new object[] { 18, "王五", 30 });
            dt.Rows.Add(new object[] { 19, "张三", 20 });//添加行
            dt.Rows.Add(new object[] { 20, "李四", 25 });
            dt.Rows.Add(new object[] { 21, "王五", 30 });
            dt.Rows.Add(new object[] { 22, "王五", 30 });
            dt.Rows.Add(new object[] { 23, "王五", 30 });
            dt.Rows.Add(new object[] { 24, "王五", 30 });
            dt.Rows.Add(new object[] { 25, "王五", 30 });
            dt.Rows.Add(new object[] { 26, "王五", 30 });
            dt.Rows.Add(new object[] { 27, "王五", 30 });
            dt.Rows.Add(new object[] { 28, "王五", 30 });
            dt.Rows.Add(new object[] { 29, "王五", 30 });
            dt.Rows.Add(new object[] { 30, "王五", 30 });
            dt.Rows.Add(new object[] { 41, "李四", 25 });
            dt.Rows.Add(new object[] { 42, "王五", 30 });
            dt.Rows.Add(new object[] { 43, "张三", 20 });//添加行
            dt.Rows.Add(new object[] { 44, "李四", 25 });
            dt.Rows.Add(new object[] { 45, "王五", 30 });
            dt.Rows.Add(new object[] { 46, "张三", 20 });//添加行
            dt.Rows.Add(new object[] { 47, "李四", 25 });
            dt.Rows.Add(new object[] { 48, "王五", 30 });
            dt.Rows.Add(new object[] { 49, "张三", 20 });//添加行
            dt.Rows.Add(new object[] { 50, "李四", 25 });
            dt.Rows.Add(new object[] { 51, "王五", 30 });
            dt.Rows.Add(new object[] { 52, "王五", 30 });
            dt.Rows.Add(new object[] { 53, "王五", 30 });
            dt.Rows.Add(new object[] { 54, "王五", 30 });
            dt.Rows.Add(new object[] { 55, "王五", 30 });       

            string data = JsonConvert.SerializeObject(dt, new DataTableConverter());

            param.Add("Title", "Witch One");
            param.Add("RefreshTime", 5);
            param.Add("NowTime", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"));
            param.Add("Data", data);
            ret = JsonConvert.SerializeObject(param);   
            context.Response.AddHeader("Access-Control-Allow-Origin", "*");
            context.Response.ContentType = "text/html";
            context.Response.Write(ret);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

上一篇：html分页下一篇：HTML静态分页(形式:首页、上一页