解决不同按日期展示对应时期数据的问题

很多猴儿们都遇到过这样的需求：
1、公司一年的业务数据，要根据月份统计显示出来
2、可以根据时间筛选，展示不同的数据
3、算了，第三就不说了
今天，我就跟大家聊聊我的开发思路吧

首先，你得知道你的数据结构里面有没有时间列，如果没有，你可以走了，如果有，请跟着一起走下去
1、设计页面格式

我也不知道你们怎么设计页面的，反正我是这样的
原因很简单，他要的是根据时间展示数据，这样展示，简单明了，但是，对于这种简单的布局，很多小猴儿都不会遍历，真的，很伤脑筋，今天，我就说说我的思路，如果你们有不同的想法可以在下面评论。

2、写SQL

假如有一个表，成绩 ：rid,times,cn,math,en
其实就是
@Override
    public List<Map<String, Object>> getgrade_time(String date1,String date2) {
    	// TODO Auto-generated method stub
    	HashMap<String, Object> param = new HashMap<String, Object>();
		String SQL="select rid,DATE_FORMAT(times,'%Y-%m-%d') times,cn,math,en from  grade where 1=1 ";
		if(null!=date1 && !"".equals(date1)){
			SQL+=" AND DATE_FORMAT(times,'%Y-%m-%d') >= DATE_FORMAT("+date1+",'%Y-%m-%d')";
		}
		if(null!=date2 && !"".equals(date2)){
			SQL+=" AND DATE_FORMAT(times,'%Y-%m-%d') <= DATE_FORMAT("+date2+",'%Y-%m-%d')";
		}
		SQL+=“ORDER BY DATE_FORMAT(a.times,'%Y-%m') DESC”；//这个很重要，是为了把相同日期的放在一块
    	return userDao.findEntitiesBySql(SQL, param,Map.class);
    }
3、前端的遍历
	因为这时候查询出来的数据是和我们要展示的格式是不同的

function search(){
	page=0;
	$("#pagenum").val(page+1);
	url="";
	var d1=$("#d1").val();
	var d2=$("#d2").val();
	
	if(null!=d1 && d1!=''&&d1!=undefined && d1!='undefined'){
		url+="&d1="+encodeURI(encodeURI(d1));
	}
	if(null!=d2 && d2!=''&&d2!=undefined && d2!='undefined'){
		url+="&d2="+encodeURI(encodeURI(d2));
	}

	load();
	
}



function load(){
	$("#loading_all").show();
	var html='';
	$("#theads").html(html);
	$.get(url,function(data){

		$("#page_lenth").html(data.length);//这是展示这次加载了多少条数据

		if(data.length>0){

			for (var i = 0; i < data.length; i++) {

				if(i==0){//如果是第一条，肯定是要在最上面显示标题和日期的data[i].times					html+=

						'<font>'+data[i].times+'</font><table  class="tablep" style="width: 1500px;">'
										+'<tr>'

						+'<td class="tdtitlce" width="25">&nbsp;</td>'

						+'<td class="tdtitlce" width="80">编号</td>'

						+'<td class="tdtitlce" width="170">语文</td>'

						+'<td class="tdtitlce" width="150">数学</td>'

						+'<td class="tdtitlce" width="100">英语</td>'

						+'</tr>';

					html+=''

						+'<tr>'

						+'<td class="tdcontle '+data[i].color+' '+data[i].color+'" align="center" width="20">'

						+'<input type="checkbox" name = "seluserlist" id="seluserlist" value="'+data[i].rid+'"/>'

						+'</td>'

						+'<td class="tdcontle '+data[i].color+'" width="80">'+data[i].rid+'</td>'

						+'<td class="tdcontle '+data[i].color+'" width="170">'+data[i].cn+'</td>'

						+'<td class="tdcontle '+data[i].color+'" width="150">'+data[i].math+'</td>'

						+'<td class="tdcontle '+data[i].color+'" width="100">'+data[i].en+'</td>'

						+'</tr>'
						;

				}else{//除了第一行

					if(i==data.length-1){//如果是倒数第二行

						if(data[i].times!=data[i-1].times){//判断本条和下一条的时间是否相同，如果不同，那这个时候就要在标题行上面展示时间啦

							html+=

								'</table><br><font>'+data[i].times+'</font><table class="tablep" style="width: 1500px;">'
								+'<tr>'
								+'<td class="tdtitlce" width="25">&nbsp;</td>'
								+'<td class="tdtitlce" width="80">编号</td>'
								+'<td class="tdtitlce" width="170">语文</td>'
								+'<td class="tdtitlce" width="150">数学</td>'
								+'<td class="tdtitlce" width="100">英语</td>'
								+'</tr>'
								;
							html+=''
								+'<tr>'
								+'<td class="tdcontle '+data[i].color+' '+data[i].color+'" align="center" width="20">'
								+'<input type="checkbox" name = "seluserlist" id="seluserlist" value="'+data[i].rid+'"/>'
								+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="80">'+data[i].rid+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="170">'+data[i].cn+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="150">'+data[i].math+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="100">'+data[i].en+'</td>'
								+'</tr></table>'
								;
						}else{//否则只需要在table后面添加行数据就行了
							html+=''
								+'<tr>'
								+'<td class="tdcontle '+data[i].color+' '+data[i].color+'" align="center" width="20">'
								+'<input type="checkbox" name = "seluserlist" id="seluserlist" value="'+data[i].rid+'"/>'
								+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="80">'+data[i].rid+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="170">'+data[i].cn+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="150">'+data[i].math+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="100">'+data[i].en+'</td>'
								+'</tr></table>'
								;
						}
					}else{//中间数据的话
						if(data[i].times!=data[i-1].times){//同样判断本条和下一条的时间是否相同
							html+=
								'</table><br><font>'+data[i].times+'</font><table class="tablep" style="width: 1500px;">'
								+'<tr>'
								+'<td class="tdtitlce" width="25">&nbsp;</td>'
								+'<td class="tdtitlce" width="80">编号</td>'
								+'<td class="tdtitlce" width="170">语文</td>'
								+'<td class="tdtitlce" width="150">数学</td>'
								+'<td class="tdtitlce" width="100">英语</td>'
								+'</tr>'
								;
							html+=''
								+'<tr>'
								+'<td class="tdcontle '+data[i].color+' '+data[i].color+'" align="center" width="20">'
								+'<input type="checkbox" name = "seluserlist" id="seluserlist" value="'+data[i].rid+'"/>'
								+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="80">'+data[i].rid+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="170">'+data[i].cn+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="150">'+data[i].math+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="100">'+data[i].en+'</td>'
								+'</tr>'
								;
						}else{
							html+=''
								+'<tr>'
								+'<td class="tdcontle '+data[i].color+' '+data[i].color+'" align="center" width="20">'
								+'<input type="checkbox" name = "seluserlist" id="seluserlist" value="'+data[i].rid+'"/>'
								+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="80">'+data[i].rid+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="170">'+data[i].cn+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="150">'+data[i].math+'</td>'
								+'<td class="tdcontle '+data[i].color+'" width="100">'+data[i].en+'</td>'
								+'</tr>'
								;
						}
					}
				}
				if(i==data.length-1){
					$("#loading_all").hide();//这个是加载中的动画效果，可以忽略
				}
			}
			$("#theads").html(html);//布局到自己的JSP页面中
		}else{//这个是判断如果没有返回数据，就只展示一个
			html=
				'<table class="tablep" style="width: 1500px;">'
				+'<tr>'
				+'<td class="tdtitlce" width="25">&nbsp;</td>'
				+'<td class="tdtitlce" width="80">编号</td>'
				+'<td class="tdtitlce" width="170">语文</td>'
				+'<td class="tdtitlce" width="150">数学</td>'
				+'<td class="tdtitlce" width="100">英语</td>'
				+'</tr></table>'
				;
			$("#theads").html(html);
			$("#loading_all").hide();
		}
	});
}


html:
<body>
  
  <table width="100%">
    <tr>
      <td><font class="fonterrMessage"></font></td>
    </tr>
  </table>
  <div style="overflow:hidden">
    <table width="100%">
      <tr>
        <td>
          <button class="button white" id="search" name="search" value="检索" onclick="search();">检 索</button>
        </td>
      </tr>
    </table>
    </div>
    <br>
    
    <table>
      
      <tr>
      	<td class="tdtitlce2" width="70">订单日期</td>
        <td class="tdcontle1">
	        <input type="date" name="outDateFromS" id="d1" value="">
	         ~ 
	        <input type="date" name="outDateToS" id="d2" value="">
	    </td>
      </tr>
      
    </table>
    <br>
    

    <div style="width: 1527px; height:600px;border:0px solid #000; overflow-x:hidden;overflow-y:auto;"  id="theads">
  
    </div>


</body>