解決不同按日期展示對應時期數據的問題

很多猴兒們都遇到過這樣的需求：
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>