JSP數(shù)據(jù)分頁導(dǎo)出下載顯示進(jìn)度條樣式
1、思路
分頁數(shù)據(jù)查詢,同時(shí)緩存設(shè)置進(jìn)度(為當(dāng)前取出數(shù)據(jù)點(diǎn)總數(shù)據(jù)比例)
2、界面進(jìn)度條 為 異步請(qǐng)求緩存比例
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); /*IE濾鏡,透明度50%*/ -moz-opacity:0.5; /*Firefox私有,透明度50%*/ opacity:0.9;/*其他,透明度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 = 取當(dāng)前頁數(shù)據(jù) 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數(shù)據(jù)分頁導(dǎo)出下載顯示進(jìn)度條樣式,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JSP 開發(fā)之hibernate配置二級(jí)緩存的方法
這篇文章主要介紹了JSP 開發(fā)之hibernate配置二級(jí)緩存的方法的相關(guān)資料,這里提供兩種配置二級(jí)緩存的方法,需要的朋友可以參考下2017-08-08JSP+Servlet+JavaBean實(shí)現(xiàn)登錄網(wǎng)頁實(shí)例詳解
這篇文章主要介紹了JSP+Servlet+JavaBean實(shí)現(xiàn)登錄網(wǎng)頁的方法,以完整實(shí)例形式分析了JSP+Servlet+JavaBean實(shí)現(xiàn)登錄網(wǎng)頁所涉及的詳細(xì)步驟與具體實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JSP中使用JDBC連接MySQL數(shù)據(jù)庫的詳細(xì)步驟
本文主要介紹了JSP中使用JDBC連接MySQL數(shù)據(jù)庫的詳細(xì)步驟,對(duì)于初學(xué)者具有很好的參考價(jià)值,需要的朋友一起來看下吧2016-12-12java對(duì)XML文件的解析、節(jié)點(diǎn)的增加、刪除操作總結(jié)
java對(duì)XML文件的解析、節(jié)點(diǎn)的增加、刪除操作總結(jié),需要的朋友可以參考下。2009-11-11ResourceBundle類在jsp中的國際化實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猂esourceBundle類在jsp中的國際化實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07