JSP Data Paging Export Download Display Progress Bar Style

1. Ideas

Paged data query, while caching the setting progress (the total data ratio of the currently fetched data points)

2. The interface progress bar is the asynchronous request cache ratio

3. Code

css:

body{
position:relative;
}
.mask{
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
background-color: #eee;
display:none;
filter:alpha(opacity=50); /*IE Filter, transparency 50%*/
-moz-opacity:0.5; /*Firefox Privacy, transparency 50%*/
opacity:0.9;/* Others, transparency 50%*/
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 =  Fetch the current page data 
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;
}
}