因為做的是大屏的一個頁面,不太方便使用鼠標點擊,所以要求自動翻頁;
前端用的是layUI,所以分頁使用的也是layUI的分頁,
jsp是這樣的(我只貼出了我的分頁部分的代碼)
<div class="layui-col-md4 layui-col-lg4">
<div class="zbordersmin dbox4" style="height: 290px">
<div class="layui-row" style="height: 52px">
<div style="height:35px;font-size: 16px;color: #00e8f3; padding-top: 15px;text-align: left;font-weight:lighter;">
<b> <span>自動翻頁</span></b>
</div>
</div>
<div id="wish_show" class="layui-row" style="text-align: left;height:200px;padding:5px 15px;overflow-y: auto;">
</div>
<div class="layui-row layui-col-space20" style="margin-top:-15px;text-align:center;">
<div id="wish_page" style="padding:0;"></div>
</div>
</div>
</div>
下面的js部分的代碼(省略了引用的部分)
<script>
var wishList = [];//全局的變量,用來接收請求返回的數據
var mylaypage;
var current_page=1;//初始化頁碼變量為1
function micro_wish() {//數據查詢
layui.use(['jquery', 'layer','laypage'], function () {
var $ = layui.$;
mylaypage = layui.laypage;
$.ajax({
url: '/serviceResources/getWish',
type: "POST",
dataType: "json",
async: false,
data: {},
success: function (res) {
wishList = res.data;
}
});
initPage(current_page);//調用分頁,傳入頁碼
});
};
function initPage(currPage){
//調用分頁
mylaypage.render({
elem: 'wish_page'
,count: wishList.length
,limit: 2
,curr:currPage//關鍵點,這里是翻到當前頁碼,可以傳入
,prev: '<em><</em>'
,next: '<em>></em>'
,jump: function(obj) {
var wish_str='';
if(obj.count==0){
document.getElementById('wish_show').innerHTML='暫無相關數據';
}else{
thisData = wishList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
layui.each(thisData, function(index, item){
wish_str+= '<div>'
+'<div style="display:inline-block;width: 7px;height: 7px;background: #30BAFD;border-radius: 50%;"></div>'
+'<div style="display:inline-block;margin-left:10px;height: 13px;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #63CCFF;opacity: 0.5;">'+item.CREATETIME+' '+item.WISHMAN+'--期望完成時間:'+item.WISHFINISHTIME+'</div>'
+'<div style="margin-top:6px;font-size: 16px;font-family: Microsoft YaHei;font-weight: bold;color: #63CDFF; ">'+item.WISHCONTENT+'</div>'
+'<div style="margin-top:6px;font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF; ">'
+item.LINKPHONE
+'</div>'
+'<hr style="margin-top:9px;height: 1px;background: #FFFFFF;opacity: 0.2;">'
+'</div>';
});
document.getElementById('wish_show').innerHTML=wish_str;
}
current_page=obj.curr;//從當前頁碼賦值給全局頁碼變量,為解決手動點擊某頁碼之后,自動翻到所點擊的下一頁
}
})
//為當前頁碼加1,也就是下次翻到的頁碼數,如果頁碼已經等於總頁數,那么就重新將頁碼賦值為1
if(current_page==wishList.length/2){
current_page=1;
}else{
current_page +=1;
}
}
//函數調用
micro_wish();
//定時器去定時調用分頁函數,傳入當前的全局頁碼變量
setInterval(function(){ initPage(current_page) }, 5000);
</script>