来回切换两个DIV实现相应的数据展示

定义div的相关代码:

<div class="col-xs-4 charts score_table_box">  
    <div class="m-chart-box" style="height:505px;padding-top: 20px;">  
        <div class="filter-box">  
            <ul id="myTab" class="nav nav-tabs">  
                <li class="active">  
                    <a href="#homeA" data-toggle="tab" style="min-width: 200px; font-weight:bold;font-size:16px;" οnclick="sortOfficeMark('A')">各系统综合能力得分</a>  
                </li>  
                <li>  
                    <a href="#homeB" data-toggle="tab" style="min-width: 180px; font-weight:bold;font-size:16px;" οnclick="sortOfficeMark('B')">重点站段TOP10</a>  
                </li>  
            </ul>  
            <div id="myTabContent" class="tab-content">  
                <div class="tab-pane fade  in active" id="homeA">  
                    <table class="table table-bordered table-hover" id="Atable">  
                        <thead>  
                          <tr>  
                            <th>单位名称</th>  
                            <th>得分</th>  
                          </tr>  
                        </thead>  
                    </table>  
                </div>  
                <div class="tab-pane fade" id="homeB">  
                    <table class="table table-bordered table-hover" id="Btable">  
                        <thead>  
                          <tr>  
                            <th>排名</th>  
                            <th>站段名称</th>  
                            <th>综合值</th>  
                          </tr>  
                        </thead>  
                    </table>  
                </div>  
            </div>  
        </div>  
    </div>  
</div> 

运用AJAX方法对后台实施请求：

function sortOfficeMark(type) {  
    var Xtable ;  
    if(type == "undefined" || null == type){  
        Xtable = $("#Atable");  
        type = "A";  
    }  
      
    if(type== "A")  
    {  
        Xtable = $("#Atable");  
    }  
    else if(type== "B")  
    {  
        Xtable = $("#Btable");  
    }  
    $(".rt", Xtable).remove();  
      
    $.ajax({  
        url: "../../security/base/peoplesafeimg!sortOfficeMarkByAjax.action",  
        type: "post",  
        data:{  
            peopletype:type ,   
        },  
        dataType: "json",  
        success: function (data) {  
            //alert(JSON.stringify(data));  
            $(data).each(function(i,val) {  
                if(type== "A" && (data != null || data != ""))  
                {  
    //              if(i>10)  
    //              {  
    //               return;  
    //              }  
                    var tablerow = $("<tr class='rt'></tr>");  
                    Xtable.append(tablerow);  
    //              tablerow.append("<td>"+(i+1)+"</td>");  
                    tablerow.append("<td>"+ (val.OFFICE_NAME).replace("处", "系统综合得分") +"</td>");  
                    tablerow.append("<td>"+val.AVG_SCORE+"</td>");  
                } else if(type== "B" && (data != null || data != ""))  
                {  
                    if(i < 10)  
                    {  
                        var tablerow = $("<tr class='rt'></tr>");  
                        Xtable.append(tablerow);  
                        tablerow.append("<td>TOP"+(i+1)+"</td>");  
                        tablerow.append("<td>"+ val.DEPOT +"</td>");  
                        /* tablerow.append("<td>"+ val.PERCENTUM +"</td>"); */// 一星级人数占比  
                        tablerow.append("<td>"+ val.AVG_SCORE +"</td>");    // 综合能力值  
                    }  
                }  
            });  
            //判断：当列表中没有数据时，提示数据为空  
            /* if(type== "A" && (data == null || data == "")){  
                 var tablerow = $("<tr class='rt'></tr>");  
                 Xtable.append(tablerow);  
                 tablerow.append("<td colspan=5 align='center'>最近这段时间无培训信息！</td>");  
            } else if(type== "B" && (data == null || data == "")) {  
                 var tablerow = $("<tr class='rt'></tr>");  
                 Xtable.append(tablerow);  
                 tablerow.append("<td colspan=5 align='center'>最近这段时间无荣誉记录！</td>");  
            } */  
        },  
        error:function(){  
            // alert("查询数据失败")  
        }  
    });   
} 

后台代码实现对数据的获取：

/**
	 * @author lenian
	 * @test 全局人员画像综合能力值排行、重点站段TOP10
	 * @date lenian 2018 07 03
	 * @return
	 */
	public String sortOfficeMarkByAjax()
	{
		List<Object> result = new ArrayList<>();
		result=peopleSafeImgManager.getSortOfficeMark(peopletype);
		try {
			String jsonArray = JSON.toJSONString(result);
			renderTextJSONGBK(jsonArray.toString());
			return null;
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return null;
	}

@SuppressWarnings("unchecked")
	public List<Object> getSortOfficeMark(String peopletype) {
		List<Object> result = new ArrayList<>();
		if ("A".equals(peopletype)) {	// 全局人员画像综合能力值排行（按指定顺序排序）
			String sql = "select sei.office_name, nvl(ROUND(AVG(sei.COMP_CHECK), 2), 0) avg_score\n" +
				"  from SECURITY_EMPLOYEE_INFO sei\n" + 
				" WHERE sei.office_name in ('运输处', '货运处', '客运处', '机务处', '工务处', '电务处', '车辆处', '供电处')\n" + 
				"   and (SEI.ON_GUARD IS NULL OR SEI.ON_GUARD = 0)\n" + 
				" group by sei.office_name\n" + 
				" order by instr('运输处, 货运处, 客运处, 机务处, 工务处, 电务处, 车辆处, 供电处', sei.office_name)";
			SQLQuery sq = dao.getSession().createSQLQuery(sql);
			sq.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP);
			result= sq.list();
		}
		else if ("B".equals(peopletype)) {	// 重点站段TOP10
			String sql = "with t as\n" +
				"(select tab.depot, ROUND(count_1/sum,4)*100 percentum, count_2 avg_score\n" + 
				" from (SELECT distinct sei.depot,\n" + 
				"                   count(*) sum,\n" + 
				"                   COUNT((CASE WHEN SEI.STAR_RATED = '1' THEN 1\n" + 
				"                     ELSE NULL END)) count_1,\n" + 
				"                   nvl(ROUND(AVG(sei.COMP_CHECK), 2), 0) count_2\n" + 
				"   FROM SECURITY_EMPLOYEE_INFO sei WHERE\n" + 
				"   REGEXP_LIKE(sei.depot, '(段|站)$')\n" + 
				"   AND (sei.on_guard is null or sei.on_guard = 0)\n" + 
				"   GROUP BY sei.depot\n" + 
				" ) tab order by percentum desc)\n" + 
				" select * from t where rownum <= 10 order by t.avg_score desc";
			SQLQuery sq = dao.getSession().createSQLQuery(sql);
			sq.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP);
			result= sq.list();
		}
		return result;
	}

效果图如下：