zoukankan      html  css  js  c++  java
  • js分页代码

    //html代码

    <table class="gridtable" align="center" valign="center" id="fenye">
    <tr>
    <th width=600>单头</th>
    <th width=600>单头</th>
    </tr>


    @foreach($data as $_data)
    <tr class="test" style="display: none;">
    <td width=600>第一条</td>
    <td width=600>第一条数据</td>
    </tr>
    @endforeach

    </table>

    //js部分,可以自定义修改

    <script>

    var obj,j;
    var page=0;
    var nowPage=0;//当前页
    var listNum=20;//每页显示<ul>数
    var PagesLen;//总页数
    var PageNum=7;//分页链接接数(5个)
    onload=function(){
    obj=document.getElementById("fenye").getElementsByClassName("test");
    j=obj.length

    PagesLen=Math.ceil(j/listNum);
    upPage(0)
    }
    function upPage(p){
    nowPage=p
    //内容变换
    for (var i=0;i<j;i++){
    obj[i].style.display="none"
    }
    for (var i=p*listNum;i<(p+1)*listNum;i++){
    if(obj[i])obj[i].style.display="table-row"
    }
    //分页链接变换
    strS='<a href="###" onclick="upPage(0)">首页</a> '
    var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
    var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
    var strC="",startPage,endPage;
    if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}
    else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
    else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}
    for (var i=startPage;i<=endPage;i++){
    if (i==nowPage)strC+='<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '
    else strC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
    }
    strE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a> '
    strE2=nowPage+1+"/"+PagesLen+"页"+" 共"+j+"条"
    strE3 = ",成功"+{{$success}}+"条,失败<span style='color:red;font-weight:700;'>"+{{$fail}}+"</span>条"
    document.getElementById("changpage").innerHTML=strS+strC+strE+strE2+strE3
    }

    </script>

  • 相关阅读:
    RabbitMQ官方文档翻译之Simple(一)
    rabbitMq集成Spring后,消费者设置手动ack,并且在业务上控制是否ack
    RabbitMQ消息队列知识点归纳
    理解Java中HashMap的工作原理
    mybatis 主键回显
    quart任务调度框架实战
    springmvc常用注解标签详解
    Java程序员玩Linux学操作系统
    在网页中发起QQ临时对话的方法
    软件测试技术学习总结
  • 原文地址:https://www.cnblogs.com/you-jia/p/6432246.html
Copyright © 2011-2022 走看看