1、思路

分页数据查询，同时缓存设置进度（为当前取出数据点总数据比例）

2、界面进度条 为 异步请求缓存比例

3、代码

css:

body{position:relative;}.mask{position:absolute;left:0px;top:0px;height:100%;width:100%;background-color: #eee;display:none;filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.9;z-index:999;}.out{margin:auto;margin-top:20%;text-align:center;height:30px;width:500px;background-color: #fff;border:1px solid red;position:relative;}.in{position:absolute;left:-1px;top:0px;height:28px;width:0px;background-color: red;}.num{position:absolute;left:0px;top:0px;height:30px;line-height:30px;width:500px;text-align:center;position:relative;}

js:

$(function(){$(.donwload).click(function(){var ulr = ----;var key = new Date().getTime();url+="?key="+key;downloadFile(url);process(key);});});function downloadFile(url) {try{var elemIF = document.createElement("iframe")elemIF.style.display = "none";document.body.appendChild(elemIF);elemIF.src = url;}catch(e){}}function process(key){$.ajax({type: 'GET',url: ----------,async:true,success:function (data) {if(data){data = parseFloat(data).toFixed(2);$(".in").css("width",(data/100*500)+"px");$(".num").text(data+"%");if(data >= 100){setTimeout(function(){$(".mask").hide();}, 3000);}else{setTimeout(function(){process(key);}, 1000);}}},error:function () {}});}

downaction

try{redisTemplate.opsForValue().set("down_process_"+qm.getKey(),0.1);int i = 0;while(true){qm.getPage().setNowPage(i++);qm.getPage().setPageSize(100);Page dbpage = 取当前页数据List<> list = (List<>) dbpage.getResult();if(list != null && list.size() > 0){if(list.size() < 100) {redisTemplate.opsForValue().set("down_process_"+qm.getKey(), 100);}else{double process = i * 100.0 / dbpage.getTotalCount() * 100;if(process < 0.1)process=0.1d;redisTemplate.opsForValue().set("down_process_"+qm.getKey(), process);}}logger.info("-------value:" + redisTemplate.opsForValue().get("down_process_"+qm.getKey()));if(list == null || list.size() < 100) {redisTemplate.opsForValue().set("down_process_"+qm.getKey(),100);break;}logger.info("-------value:" + redisTemplate.opsForValue().get("down_process_"+qm.getKey()));continue;}}catch(){}finally{redisTemplate.opsForValue().set("down_process_"+qm.getKey(),100);redisTemplate.expire("down_process_"+qm.getKey(),5, TimeUnit.MINUTES);}public double process(HttpServletRequest request, HttpServletResponse response,@PathVariable(value ="key") String key) throws IOException {Double process = 0.1d;try{int i = 0;while(true) {if(i>=2){process = 100d;break;}i++;if (redisTemplate.opsForValue().get("down_process_"+key) == null) {Thread.currentThread().sleep(1000l);continue;}else{process = Double.valueOf(redisTemplate.opsForValue().get("down_process_"+key).toString());break;}}}catch (Exception e){process = 0.1d;e.printStackTrace();}finally {return process;}}

以上所述是小编给大家介绍的JSP数据分页导出下载显示进度条样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！