• LayUI分页--定时自动翻页


    因为做的是大屏的一个页面,不太方便使用鼠标点击,所以要求自动翻页;

    前端用的是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; 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>

  • 相关阅读:
    第一次离职
    代码人生
    Array.Sort()实现细节和效率
    步入正轨
    2013,冲刺、加油!!!
    Struts2 OGNL 字符串自定义转化对象细节
    Struts2 输入格式自动校验的一些注意事项
    MySQL 5.7.17 Windows安装和启动
    关于Hibernate 5 和 Hibernate 4 在创建SessionFactory的不同点分析(解决 org.hibernate.MappingException: Unknown entity: xx类报错问题)
    Struts2 OGNL 自动转换Date类型的一些注意事项
  • 原文地址:https://www.cnblogs.com/hjLu/p/13677899.html
Copyright © 2020-2023  润新知